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APRESENTAÇÃO DO MIT APP INVENTOR 


Em 2010 o Google lançou o software Google App Inventor, como resultado de uma 
pesquisa de vários anos do Massachusetts Institute of Technology (MIT), coordenada pelo 
professor de Ciência da Computação e Engenharia, Hal Abelson. Pouco tempo depois o 
software se intitulou MIT App Inventor, onde é mantido até os dias atuais pela equipe do 


MIT, composta por alunos, funcionários e liderada pelo professor Hal. 


O MIT App Inventor é um ambiente de programação que permite indivíduos com 
pouco ou nenhum conhecimento sobre programação criarem seus próprios aplicativos 
Android, para smartphones e tablets, em um período de tempo curto e de maneira prática. 
Sua linguagem de programação se dá através da montagem de blocos, assemelhando-se 


a montagem de um quebra-cabeças. 


A versão original do MIT App Inventor conhecida como App Inventor Classic (All), 
foi desligada em 2015, entretanto em 2014 já havia uma nova versão do MIT App Inventor, 
com o objetivo de proporcionar uma melhor experiência aos usuários, cnamada de MIT 


App Inventor 2 (Al2), ou somente App Inventor 2. 


A versão atualizada do App Inventor possui blocos visuais e recursos de linguagem 
adicionais no próprio software, sem precisar de um processo separado. O Al2 é composto 
por duas abas, uma para a montagem visual e inserção dos componentes necessários para 
o funcionamento do aplicativo e outra aba para a montagem dos blocos, ou seja, para a 
programação do aplicativo, além disso, a plataforma possui um recurso que permite testar 


o aplicativo que está sendo desenvolvido. 


Nesta obra, o App Inventor é explorado e são apresentados os passos para O 
desenvolvimento de aplicativos matemáticos com ênfase em objetos do conhecimento 


específico. 


Apresentação do MIT App Inventor 
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CONHECENDO O APP INVENTOR 2 


Antes de trabalhar com qualquer ferramenta é imprescindível conhecer os seus 
objetos, a sua organização e o seu funcionamento, assim apresentamos nesta seção as 
duas abas e os componentes do App Inventor, bem como os passos para o primeiro acesso 


ao software e a funcionalidade de teste oferecida por ele. 


ACESSO AO SOFTWARE 


Para acessar a plataforma do App Inventor 2 e conhecer um pouco da sua 


funcionalidade siga os itens a seguir na ordem apresentada: 


| | Acesse o site: http://ai2.appinventor.mit.edu/. 


Il. Faça login com uma conta do Google (conta do gmail). Caso não 
possua, crie uma conta em: https://accounts.google.com/signup/Av2/ 
webcreateaccount?continue=https%3A%2FY%2Faccounts.google.com%2F 
ManageAccount%3Fnc%3D1 &hl=pt-br&flowName=GlifWebSignIn&flowEntr 
y=SignUp . 


HI. Feito o login, abrirá uma aba, nela clique em CONTINUE. 


IV. Em seguida abrirá uma nova aba, clique em CLOSE. 


V. O idioma estará em inglês, altere-o para “português do Brasil”, conforme a 
figura 1. 


port an Is: 
e Es 
English 


Espariol 


Nome Date Created Date Modified v Français 
Magyar 
Italiano 
emo] 
Nederlands 
Polski 


Português 


Pycckuh 
svenska 
[lisa ra 
EbsEsT 


Figura 1 - Alterando o idioma. 
Fonte: Adaptado de App Inventor (2020). 


VI. As duas abas anteriores abrirão novamente. Repita o mesmo processo: 
clique em CONTINUE e em seguida CLOSE. 


VII. No canto superior esquerdo clique em “Iniciar novo projeto” e dê um nome ao 
projeto. Observe a figura 2. 
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es MIT Projetos Conectar Compilar Settings Ajuda 
MS. APP INVENTOR E E U a ” 


O eo 
EEE ES ESSES 
ET 


Meus Projetos 


View Galeria Reportar um Português do 
problema Brasil + 


Nome Data de Criação Data de Modificação v Publicado 


Criar um novo projeto no App Inventor 


Nome do 
projeto: 


Figura 2 - Novo Projeto. 
Fonte: Adaptado de App Inventor (2020). 


Dessa forma você já sabe como acessar e iniciar um projeto no App Inventor, assim 


o próximo passo é explorar as duas abas. 


ABA DESIGNER (OU EDITOR DE ECRÃS) 


Aaba de designer ou editor de ecrãs (depende do navegador utilizado), cuja interface 
está representada na figura 3, é utilizada para criar a aparência do aplicativo, inserindo 


todos os componentes necessários para o funcionamento desejado do mesmo. 


Propriedades dos 
componentes 


Botão de 
designer 


componentes 
utilizados 


Área de 
visualização 


Figura 8 - Interface da Aba de Designer. 
Fonte: Adaptado de App Inventor (2020). 


A aba Designer é composta por: 


* Paleta: É uma caixa de componentes, os quais estão divididos em seções (ga- 
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vetas). Ao clicar em uma seção aparecerá os seus componentes, por exemplo, 
na figura 3 está selecionada a seção “interface do usuário”, que tem como al- 
guns de seus componentes o Botão, a CaixaDeSeleção e o NavegadorWeb. 
Para conhecer mais sobre a paleta abra cada uma das seções e verifique quais 
os componentes que as compõem, de modo que ao clicar no ponto de interro- 
gação (7) ao lado de cada componente você obterá mais informações sobre o 
mesmo. 


* || Componentes: No campo “componentes”, assim como representado na figu- 
ra acima, aparecerão todos os componentes utilizados no desenvolvimento do 
aplicativo. 


* | Propriedades: Nesse campo você tem acesso as propriedades de cada com- 
ponente, basta clicar sobre o componente no campo “componentes” (onde apa- 
recem os componentes utilizados). As propriedades são mutáveis, você pode 
alterar forma, tamanho, cor e imagem, por exemplo, entre várias outras proprie- 
dades. 


* | Visualizador: Para montar o aplicativo os componentes das seções são arras- 
tados para o campo visualizador, cujo formato retrata um celular/tablet. Nesse 
campo os componentes podem ser organizados de modo que o aplicativo tenha 
a aparência desejada. 

Em resumo, na aba Designer você tem acesso a todos os componentes para formar 
o seu aplicativo, de modo que esses devem ser arrastados e organizados na área de 
visualização e as propriedades dos mesmos podem ser alteradas conforme o desejo do 


usuário. Assim, conhecendo o essencial desta aba vamos conhecer a Aba Blocos. 


ABA BLOCOS 


Na aba Blocos, cuja interface está representada na figura 4, é realizada a 
programação do comportamento do aplicativo através da montagem de blocos, semelhante 


a montagem de um quebra cabeça. 
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Botão de 
blocos 


= 
ntes 


Área de visualização 


compone 
inseridos 


Midia 


E 096 


Figura 4 - Interface da Aba Blocos. 
Fonte: Adaptado de App Inventor (2020). 


A aba Blocos é composta por: 


* Botão de Blocos: Se você está na aba designer e deseja ir para a aba blocos 
basta clicar no botão “bloco”. 


* | Blocos: Os blocos são classificados em itens de acordo com o comportamento 
exercido por cada, onde ao clicar em um item, todos os blocos que o compõem 
são exibidos. Como exemplo, na figura 4 está clicado o item “matemática” e ao 
lado estão exibidos todos os blocos cujo comportamento se refere a esse item. 


* Blocos específicos: Abaixo do item “screen1” (ou o nome da sua tela), apare- 
cem todos os componentes inseridos de modo que ao clicar sobre um compo- 
nente são exibidos os blocos específicos do mesmo, como exemplo na figura 5 

está inserido. 


Bar 


o componente “botão 


quando (5) JJEB .Cique 
fazer 

quando (:7-C) BB RecebeuFoco 
fazer 


quando (FUI IES Ciqueongo 
fazer 


quando (:7"C5]EB PerdeuFoco 


E 006 


Figura 5 - Os blocos específicos do componente Botão. 
Fonte: Elaborado pelos autores. 
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* | Visualizador: Para programar o aplicativo os blocos são arrastados para o vi- 
sualizador e ali ocorre a montagem dos mesmos. 


TESTE DO APLICATIVO (TESTE AO VIVO) 


Uma das grandes vantagens do App Inventor é a possibilidade de testar o aplicativo 
enquanto está sendo desenvolvido, com o intuito de verificar se os mesmos estão 
funcionando como o esperado e possibilitando ajustes a fim de melhorá-los. Há três formas 
de testes, chamados de testes ao vivo, sendo que a forma mais prática e recomendada 
pelo site do MIT App Inventor é testar com o dispositivo android (smartphone ou tablet) 
e o PC (computador ou notebook) conectados a uma rede de internet, para realizar esse 
teste siga os passos abaixo: 

|. Acesse aloja de jogos do seu dispositivo Android (Google Play Store), procure 
pelo aplicativo MIT AIZ2 Companion e clique em instalar. Ou clique no link a 


seguir que você será direcionado diretamente para efetuar o download: https:// 
play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanions. 


Il. Há duas opções a serem seguidas de acordo com a quantidade de 
dispositivos que você deseja conectar para testar o aplicativo: 


Ill. Para um dispositivo: Nesse caso, é possível testar o aplicativo em 
somente um dispositivo simultaneamente, para isso acesse o site do 
App Inventor 2 no PC e inicie ou selecione um projeto. Em seguida no 
menu superior clique em “Conectar - Assistente Al”, como mostrado na 
figura 6. 


MPL APP IIvENTOR Projetos Ceia Some Settings juda 
Conhecendo || Assistente Al 
Emulador 


Paleta Visualiza usB | 


Refresh Companion Screen Mostrar os componentes ocultos no Visualizador 


Interface de Usuário Reiniciar a Conexão Tamanho de telefone (505.320) 4 
Reiniciar Conexões 
5 Botão ? 


Figura 6 - Testando o aplicativo em um dispositivo. 
Fonte: Adaptado de App Inventor (2020). 


Il.Il. Para dois ou mais aplicativos: Aqui é possível que dois ou mais 
dispositivos se conectem ao aplicativo simultaneamente, a fim de testá- 
lo/utilizá-lo, de modo que a conexão pode ser realizada por no máximo 
duas horas. Para realizar esse teste você deve clicar em “Compilar - App 
(fornecer o QR code para o apk)”, no menu superior da tela, conforme 
a figura 7. 
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ExDIROS CA O oa «Qi D ser + Ajudar Os Meus Projetos ViewTrash Guia Reportar um problema 
Adicionar Ecrã App ( fomecer o QR code para o .apk ) 
App ( guardar .apk no meu computador ) 
| | 


Visualizador E Componentes 


ÚlMostrar os componentes ocultos no Visualizador Screen1 


Tamanho de telefone (505,320) w 


Figura 7 - Testando o aplicativo em vários dispositivos. 
Fonte: Adaptado de App Inventor (2020). 


Il. Após realizado o passo Ill ou II.Il você deve acessar o aplicativo MIT 
A1iCompanion no seu dispositivo e clicar na opção “sScan QR Code” e em 
seguida escanear o código QR da tela do PC ou digitar o código, observe 
a figura 8. 


MIT App Inventor 2 ê 
Conectar ao Assistente 


typeint 


scan the QR code 


pbxbpm |] 


Of 


Your IP Address is: 192.168.0.2 
Version: 2.59 


Use Legacy Connection 


Cancelar 


Figura 8 - Conectando o dispositivo ao aplicativo. 
Fonte: Elaborado pelos autores. 

Agora você pode acessar no seu dispositivo o aplicativo, que será atualizado conforme 
as modificações feitas na aba de designer e de blocos, entretanto como mencionado 
anteriormente há três possibilidades para realizar o teste. A segunda possibilidade é através 
do emulador instalado no PC, onde para obter mais informações sobre o processo acesse 
O link http://appinventor.mit.edu/explore/ai2/setup-emulator.html. A terceira possibilidade, 
cujo uso é recomendado em últimos casos, é através do dispositivo conectado ao PC com 
um cabo USB, de modo que as informações sobre essa possibilidade se encontram no link 


http://appinventor.mit.edu/explore/ai2/setup-device-usb.html. 


Agora você já sabe como testar os seus aplicativos, salientamos que foi exposto 


Conhecendo o app Inventor 2 


somente o passo a passo da primeira opção por se tratar da opção recomendada pela 
equipe do MIT, que mantém o App Inventor, e por ser uma opção simples e prática, onde no 


processo não há perda ou alteração de informações. 


GALERIA DO APP INVENTOR 


O App Inventor possui uma galeria própria que contém aplicativos dos mais variados 
temas, desenvolvidos por seus usuários, de modo que o acesso a essa galeria deve ser 
feito através da sua conta no App Inventor. Estando em sua conta, clique na opção “os 
meus projetos” e em seguida na opção “ login to gallery” na parte superior, assim você será 


direcionado para a galeria, representada na figura 9. 


Crie 
e MIT e Sobre Educadores Notícia Recursos Blogs 
se. Aa aplicativos! 


Galeria do MIT App Inventor 


Você está logado como: Informações da conta 


Classificar por nome Seus aplicativos Classificar pelo mais Próxima >> 
recente 


Aplicativos em destaque Página inicial da galeria 


Figura 9 - Galeria do App Inventor. 
Fonte: Elaborado pelos autores. 


Na galeria você tem acesso aos aplicativos disponibilizados, podendo buscar 
através de assunto, tem acesso a informações da sua conta como aos aplicativos que 
você publicou na galeria. Em relação às informações da conta, você pode preencher nome, 
e-mail, utilizar imagem de perfil e escolher a privacidade dos seus aplicativos, de modo que 
se você selecionar a opção “outras pessoas podem ver seu perfil?”, representada na figura 


10, qualquer usuário do App Inventor poderá acessar o seu aplicativo. 


Você pode atualizar as informações da sua conta aqui. 


Seu endereço de email: | 
Seu primeiro nome: 


Seu último Nome: 


Outras pessoas podem ver seu perfil? 


Arquivo de imagem: 


| Enviar 


Escolher arquivo | Nenhum arquivo selecionado 


Figura 10 - Privacidade da galeria no App Inventor. 
Fonte: Adaptado de App Inventor (2020). 


Conhecendo o app Inventor 2 


Caso você não selecionar a opção o aplicativo ficará visível na sua galeria própria, 
onde pode ser acessado somente por você e pela equipe do MIT, entretanto ao publicar um 
aplicativo na galeria é gerado um link de acesso a ele, o qual você pode disponibilizar para 


pessoas do seu interesse a fim delas terem acesso a esse aplicativo. 


Após a explanação dessa seção, conhecendo um pouco da composição do App 
Inventor e das suas funcionalidades, você está pronto para começar a desenvolver aplicativos 
com o mesmo, mas antes de criar os seus próprios aplicativos é importante reproduzir 
alguns exemplos. Nesse sentido, acompanhe o passo a passo do desenvolvimento dos 
aplicativos trazidos na sequência e reproduza o desenvolvimento dos mesmos e também 
altere as propriedades dos componentes e incremente os aplicativos, pois isso lhe auxiliará 


e facilitará a construção dos seus próprios aplicativos. 
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APLICATIVO |: BEM VINDO AO APP INVENTOR 2 


Siga os passos citados no capítulo anterior para acessar a plataforma do Al2 e 
vamos construir o primeiro aplicativo, simples, não matemático, mas que permitirá que você 
conheça como ocorre a inserção de alguns componentes, linguagens de programação e 
a respectiva funcionalidade destes. Assim, acompanhe e realize os seguintes passos na 
ordem descrita. 

* Nomeie o seu projeto/aplicativo 

Chamamos o nosso projeto de BemVindoAoAPPInventor2, perceba que o nome não 
pode conter espaços, pontuação ou acentuação. O aplicativo será um aplicativo “que fale”, 


quando o botão é tocado ou o celular movimentado. 


* Na aba editor de ecrãs ou designer 
Observe a figura 11 e insira dois botões, arrastando dois componentes “botão” para 
dentro da caixa de visualização. Em seguida clique sobre o botão 1 e em propriedades 


altere o texto para “olá”, depois altere o texto do botão 2 para “qual o próximo passo?”. 


Paleta Visualizador 


Interface de Usuário 


3 EB 


OLÁ 
— —— 


Legenda 3 [| 
Qual o próximo passo? 
TamanhoDaFonte 
Lista = 


> 


e 


Renomear — Apagar 


Htimédi 


Enviar Ficheiro 


Organização 
Multimédia 


Desenho e Animação 


Figura 11 - Inserindo botão no aplicativo 1. 
Fonte: Elaborado pelos autores. 


Aplicativo 1: Bem vindo ao app Inventor 2 


Maps i 
Qual o próximo passo? E 
de SensorAcelerómetro 
e 
Arraste 
E queens aqui 


Aparecerá 
aqui 


Figura 12 - Inserindo acelerômetro. 
Fonte: Elaborado pelos autores. 


Queremos que cada botão e o sensor acionem uma fala, portanto na seção 
multimídia insira três componentes “texto para falar”, lembrando que este componente 


também é invisível, como apresentado na figura 13. 


ds 
pa 
Mres 
DB ter 


Arraste a) E = 
aqui 


Multimedia 


LEGOS MINOSTORMSO 


Experimental 


Figura 13 - Inserindo “texto para falar”. 
Fonte: Elaborado pelos autores. 


Na aba de designer já foram inseridos todos os componentes necessários para O 


aplicativo e agora vamos programá-los na aba blocos. 


* Na aba blocos 
Vamos programar a funcionalidade de todos os componentes, sendo que queremos 


que quando o “botão 1” for clicado o aplicativo fale. Para tanto, faça como na figura 14. 
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BemVindoAoAPPinventor2 [ESSES ESSES 


Blocos Visualizador 
B imemos 
B [A TextoParaFalari - Bruna 
= Arraste e 
Lógica á 
Miiatemátca es encaixe 
craa EMENTA TextoParaFalari - Bens 
Listas 2! 
fazer [TB Botão! - Meto 
Bocicoares ; extoParaF alari 
a ro Md TextoParaFalar! - EH" 
Ee dona O o e À mensagem 
Bysnnes mensagem dm 
Procedimentos 
& Dscreent 
Betão 
EB Botãoz 
É ed 1) 
Clique SensorAcelerómetro 
MrentoParafaiar 


a 8 estaca rsrsr 
MR TextoParaFalara 

Oualque compete MTexoParaFaiart = Widoma -] 
Beromear || Apaga star (CIO (COIEES por p 


Multimédia 
Enviar Ficheiro 


Figura 14 - Blocos do aplicativo | (a). 
Fonte: Elaborado pelos autores. 


Queremos que a fala do aplicativo seja: “Olá! Bem vindo ao app inventor 2º”, 


seguindo a figura 15 insira uma caixa de texto e digite a frase. 


BemvVindoAoAPPInventor2 | 


“Blocos “Visualizador 


& Internos 


Bcontroie 
Biógca 


MMtemóática 
Le 


or comprimento 
Bisas Lo comprimento » 
Mocionares é vazio? 
Moore: mensagem 
Myaiáes comparar textos Mi] “ 
BM procesimenos 
O Dscenl Arraste, encaixe e 
1 Botão -— . em 
o f E dentro da caixa digite a 
EB potãoz 
O sersorAcelerómeiro? começa em texto frase 
WrexoParaFalan parte 
W TextoParaFalar? E 
WB TextoParaFalar3 = 


parte 
8 Qualquer componente 


repartir * Ei) 
em 


“Multimédia repartir nos espaços 


LEgpios Ficheiro segmento texto 


Renomear | Apagar 


Figura 15 - Blocos do aplicativo | (b). 
Fonte: Elaborado pelos autores. 


Queremos também que quando o “botão 2” for clicado o aplicativo fale outra frase, 


para tanto faça de acordo com a figura 16. 
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BemVindoAoAPPInventor2 


RE 


BemVindoAoAPPinventor2 [ES [EEE 
e EZUS 


S internos 


& Internos ando ACIIZICiZ 2 DepoisDerFalar 
[TEN Botão? - Kenta Beoroe pa «e 
EB contro 
fazer Miógica 
Btógica 
Mina BB Miatemátca 
fatemática 
uando (:5]5773E8 -RecebeuFoco 
Ea q Botão? Breso quando AEIZIiZ28B AntesDeralar 
fazer Mustas 
Busta 
mo Motores 
ictionaries ? = 
juando (E5]-[/8EB .CliqueLongo 
me : (EESZEB Cliquelong Bcoe: EN TexioParaFalars - Ez =] 
Elena fazer 
Myariieis Mynises mensagem 
pn Procedimentos 
—Mprocesimenos quando (:5:5/8B PerdeuFoco € Mscrent u[TexoParaFalarZ = PalsesDisponíveis —] 
& Dscreem É 
EB sorão 
Besc: dTexoParaF ata? = MW UnquasDiponheis —] 


SensorAcelerómetrol 


quando (E57E[7EB ToqueParaBaixo 


E sensoracelerómetror 


MW rexoPararaan À oiusiar QOTORTIZAES  OSEB pera 1 
= 

TextoParaFalar2 ToqueParaCima Extoparar alar3 

reco saa SEE A[TexoPaaFalar? - lidoma ] 


(E Qualquer componente 


Enviar Ficheiro 


Renomear | Apagar 


Multimédia Ei 


Enviar Ficheiro 


Figura 16 - Blocos do aplicativo (c). 
Fonte: Elaborado pelos autores. 

Quanto o “botão 2” for clicado o aplicativo irá dizer: “Utilize a sua criatividade e 
incremente este aplicativo, por exemplo, insira imagem, altere a cor e forma dos textos” 
e como é uma frase um tanto extensa, para proporcionar uma melhor pronúncia pelo 
aplicativo é preciso dividi-la em três frases. Assim, seguindo a figura 17 insira três caixas 


de texto, uma para cada frase e um bloco para juntar as três frases. 


BemVindoAoAPPInventor2 | screen - | 


BemVindoAoAPPInventor2 Esiissillhe 


Adicionar Ecrã 


internos & Intenos 
EB controie a] EB controle "ECA 
[o] Lógica juntar BB ógica juntar 
CT CT» 
Istas Istas 
BM oictionaries Moiciosaries 
cores cores 
Misses Morses 
MM Procedimentos MH Procedimentos 
nie Ei 
EB Botão! ESTE EB Botãor TENER 
EB Botãoz EB Botãoz 
5 sensoracelerómetrol começa em texto 66 sensoracelerómetrol começa em texto 
MM rextoParaFalar) parte Bl TextoParaFalar parte 
WB TextoParaFalar2 COLHER texto Bl TextoParaFalar2 CREA texto 
E TextoPararalar3 Wi TextoParaFalar3 


Qualquer componente 


Renomear | Apagar 


Multimédia 


repartir - Bico) 
em 


repartir nos espaços 


Enviar Ficheiro ... 


segmento texto 


& Qualquer componente 


Renomear | Apagar 


repartir - E 
em 


repartir nos espaços 


M A 


Enviar Ficheiro 


segmento texto 


Figura 17 - Blocos do aplicativo | (d). 
Fonte: Elaborado pelos autores. 


O bloco de juntar textos está somente com duas janelas, ou seja, com ele podemos 
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juntar somente dois textos, entretanto podemos abrir uma nova janela para juntar as duas 
frases com a terceira, como mostra a figura 18 e depois basta encaixar os blocos e digitar 


as frases. 


juntar 
Clique, cadeia 
arrastee cadeia 
encaixe cadeia 
— 


EB Clique 


[UR ud TextoParaFalar2 - Ns 


mensagem 


juntar“ 


Clique 
aqui 


juntar KH 


Figura 18 - Blocos do aplicativo | (e). 
Fonte: Elaborado pelos autores. 


Queremos que quando o dispositivo for movimentado/sacudido o aplicativo diga “o 


que você está achando deste software?”, para que isso ocorra, faça conforme a figura 19. 


BemVindoAoAPPInventor? [EIS [ESSE BemVindoAoAPPInventor? ES EEE BemVindoAoAPPinventor2 E CEE 


E internos 


Blocos 
Moe posa Biro O CA 
Miss tszer Busca 
mo Ex 
E & 
Num E ceremero 
Boss [| 
== DETSLESEEDIO CET | Bee dr (TERESA ra Bom 
Mynies Munses = Misnies 
= o 7] ge reais 
O Dice 8 Dsomn (EEE Ee] & Bs EEE 
Pers CESSNA Ersih Prel [eme 
De RR Mi DCTETOATER (UTTEETIÇO | epal 
O sercorsenierimerror PaSEcacIam (om | [AEE começa em texto 
[ca ESTICETDES (SENTE pos pa pat 
rencmrs ão CEEE sea 
RR == =00 =] GE > rar 
O = ===> ==> JN Epa SO E dopaçes poe 
o ao fee RR) 
Mtmédo SAE] vã EEEF Mutiméda dE ça 
= cartoes ssspres 
is VESTE 


Figura 19 - Blocos do aplicativo | (f). 
Fonte: Elaborado pelos autores. 


Em seguida encaixe os blocos e digite a frase, como na figura 20. 


quando 4 Clique 
fazer chamar 


mensagem 
+ 


quando 3 Clique 
r4o DANE pr: E TextoParaFalar? - Ez 


mensagem juntar 


quando 
fazer chamar 


mensagem 
hm 


Figura 20 - Blocos do aplicativo | (9). 
Fonte: Elaborado pelos autores. 
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O aplicativo está programado e agora precisamos testá-lo para ver se o mesmo está 


funcionando de acordo. 


* Testando o aplicativo 

Com o aplicativo feito, você deve testá-lo para ver se está funcionando como o 
esperado, assim escolha uma das três formas e seguindo os passos teste o seu aplicativo. 
Ressaltamos que é importante testar o aplicativo durante todo o seu desenvolvimento e não 
somente no final, pois se houver algum erro na funcionalidade do mesmo será mais fácil de 


localizar o equívoco cometido. 


* Incrementando o aplicativo 

Você pode e deve realizar algumas modificações no seu aplicativo, com a finalidade 
de deixá-lo mais elaborado e de conhecer a sistematização de alguns componentes. 
Trazemos aqui algumas modificações como mostra a figura 21, chamamos a tela de 
“seja bem vindo”, ajustamos a organização horizontal dos componentes para “centro”, 
alteramos algumas propriedades dos botões e os renomeamos, lembrando que nomear 
os componentes especificamente auxilia na organização, principalmente quando há uma 
quantidade significativa de componentes utilizados. 


ArumaçãoAberturaDeEcrã 
Padrã 


PrimaryColor 
E padrão 


PrimaryColorDark 


Cancelar 


ShowListsAsJson 
MostrarBarraDeEstado 


Dimensionamento 


Renomear Componente 


O Pa 


imagemDeFundo 


BlocksToolkt 

Al + 
AnimaçãoNoFechoDeEcrã 
Padrãs 


icone 


TutorialURL 


Figura 21 - Incrementando o aplicativo | (a). 
Fonte: Elaborado pelos autores. 


Além disso, inserimos uma imagem que é mostrada somente quando o botão 1 é 


clicado. A inserção da imagem é mostrada pela figura 22. 
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imagem! 


Chckable 


à Pass [m) 
altura 
fextoParaF alar] gs 


MW TextoPararalarz Largura 
6 sensor acelerómetrol e 
DR rextoParaFalars Imagem 
| Envie Ficheiro 
Canceis OK 
prece) LO « Rotatonângie 
Renomem | Apagar RedimensionarParaCabes 
Motimédia = Visível 
[m) 


Bica pos 
Emvias Fcheso 


Figura 22 - Incrementando o aplicativo | (b). 
Fonte: Elaborado pelos autores. 
Para você compreender a programação referente a imagem, observe a figura 23, 


que contém também a imagem do aplicativo pronto no dispositivo. 


T que Seja Bem Vindo 
fazer chamar (EIIECIZEAES Falar 
mensagem + 


justar (ENEM SIVE par; És à 
Sega Vo “Qual o próximo passo? 


quando 


ro DM 8 TextoParaFalar? - Ec) 


mensagem juntar | * ) or exemplo, você po. Ja 
E Es - .. 


Sacudndo APP INVENTOR 


Falar 
mensagem 


Figura 23 - Incrementando o aplicativo (c). 
Fonte: Elaborado pelos autores. 


Os incrementos e modificações foram trazidas como exemplos, mas você pode 
realizar outras modificações, sendo que o seu primeiro aplicativo está pronto e você pode 


seguir adiante e desenvolver o próximo. 
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APLICATIVO Il: CLASSIFICAÇÃO DE TRIÂNGULOS 


O aplicativo que será desenvolvido nessa seção é um aplicativo matemático assim 
como os demais que serão apresentados nesta apostila. Esse está totalmente relacionado 
ao conteúdo classificação de triângulos e para desenvolvê-lo siga os passos descritos a 
seguir, lembrando que os triângulos podem ser classificados tanto quanto aos lados como 


quanto aos ângulos. 


* Na aba Designer 

Vamos criar primeiramente um espaço para a classificação quanto aos lados e em 
seguida o espaço para a classificação quanto aos ângulos. Para o espaço destinado 
a classificação quanto aos lados, representado na figura 24, arraste para a área 
de visualização três caixas de textos, coloque como dica “lado 1”, “lado 2” e “lado 3”, 
respectivamente, em propriedades selecione a opção “somente números” e você pode 
renomear as caixas de texto. Na sequência, acima das caixas de texto insira uma legenda 
e mude o texto para “Informe a medida dos lados do triângulo”, em seguida abaixo das 
caixas de texto acrescente um botão e mude o seu texto para “Clique aqui para classificar 


o triângulo quanto aos lados” e depois adicione uma legenda e exclua o seu texto. 


»iLegendal CorDeFundo 
Padrão 
E) Pliador aos 
Ativado 
FonteNegrito 
ificação. Lados Ú 


lado 2 


“Sado 3 


es class 
Informe a medida dos lados do triângulo À classificação. lados Fonteltálico 
Ú 


TamanhoDaFonte 


FamiliaDaFonte 


padrão » 


Clique aqui para classificar o triângulo quanto aos lados 


Altura 


Largura 


Figura 24 - Espaço para a classificação quanto aos lados. 
Fonte: Elaborado pelos autores. 


Agora para o espaço de classificação quanto aos ângulos acrescente os mesmos 
componentes e na mesma ordem conforme os já existentes na área de visualização, de 


modo que a área de visualização fique conforme a figura 25. 
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L JMostrar os componentes ocultos no Visualizador Screenl 


Tamanho de telefone (505,320) w 


À |Legendal 

“lado 1 

“Sado 2 
lado 3 


E classificação. Lados 


Informe a medida dos lados do triângulo A classificação. lados 


A |LegendaZ 


* “angulo 1 
* ângulo 2 
É J ângulo. 3 


Clique aqui para classificar o triângulo quanto aos lados E classificaç ão. ângulos 


“Alelassificação Ângulos 


Informe a medida dos ângulos do triângulo 


Clique aqui para classificar o triângulo quanto aos ângulos 
Renomear Apagar 


Figura 25 - Componentes na área de visualização do aplicativo II. 
Fonte: Elaborado pelos autores. 


Já temos todos os componentes necessários para programar o funcionamento do 


nosso aplicativo, vamos então para a aba blocos. 


* Na aba Blocos 

Primeiramente programaremos a classificação quanto aos lados, para isso lembre- 
se dos conceitos: O triângulo é equilátero quando todos os lados possuem a mesma 
medida, o triângulo é isósceles quando dois lados possuem a mesma medida e o triângulo 
é escaleno quando os três lados possuem medidas diferentes. A programação dos blocos 


consistirá em reproduzir essas definições, conforme descrito na sequência. 


Primeiramente vamos programar os blocos para a classificação do triângulo 
equilátero, fazendo como mostra a figura 26, sabendo que a frase contida no bloco texto 
rosa é “Quanto aos lados o triângulo é classificado como equilátero” e lembre-se que a cor 


do bloco se refere ao item de blocos que ele está classificado. 


Ele - MM ado 1 - MTexo - = - [iado 2 - Nexo -| 


0 ET ME classificação lados - EM Texto - N--5 Mãos lados o triângulo é classificado como equilátero [E 
E 


Figura 26 - Blocos do aplicativo Il (a). 
Fonte: Elaborado pelos autores. 


Agora em relação ao triângulo isósceles, perceba que a sua definição não afirma 
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se o terceiro lado possui medida diferente ou igual a medida dos dois lados com medidas 
iguais, porém na programação do aplicativo iremos considerar que o terceiro lado possui 
medida diferente, pois se não afirmarmos que o terceiro lado é diferente, o aplicativo “se 
confunde” no momento de classificar o triângulo em equilátero ou em isósceles. Então, 
monte os blocos para a classificação do triângulo isósceles seguindo a figura 27 e observe 
que a frase escrita no bloco de texto rosa é “ Quanto aos lados o triângulo é classificado 


como isósceles”. 


E Texto - ]= - iaão 2 - MTexo 


E Texto - M+. 
então ajustar = Texto - Nom aos lados o triângulo é classificado como isósceles |h 
im 


Figura 27 - Blocos do aplicativo II (b). 
Fonte: Elaborado pelos autores. 


Agora na classificação do triângulo como escaleno basta somente reproduzir a sua 


definição com os blocos, assim como mostra a figura 28. 


lado 1 - MTexo - N = - JWiado 3 - Nexo 


então ajustar (ES dos = |M Texto - Wes cms! aos lados o triângulo é classificado como escaleno. [j 
as 


Figura 28 - Blocos do aplicativo II (c). 
Fonte: Elaborado pelos autores. 


Para concluir a programação da classificação quanto aos lados encaixe todos os 


blocos conforme a figura 29. 
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quando (CETEUET- MES TES Clique 
fuer (o/se (CM (LED O EB 


OA csssficação Jados + Teo - TO 
— 


lado 1 - Nexo - E - Wado 2 
“lado 1 - Mi Texo - N*- |Wiado 3 
Tado 2 - NTexo - N=- iai 3 


ES para 


então ajustar CEE 
NR 


Figura 29 - Blocos do aplicativo II (d). 
Fonte: Elaborado pelos autores. 

Agora vamos programar os componentes para a classificação quanto aos ângulos, 
lembrando que o triângulo retângulo tem um ângulo de 90º, o triângulo obtusângulo tem um 
ângulo maior de 90º e o triângulo acutângulo possui todos os ângulos menores que 90º. 
Assim, seguindo os conceitos da classificação quanto aos ângulos, vamos programar os 


blocos, de forma semelhante ao que foi feito na classificação quanto aos lados. 


Monte os blocos de acordo com a figura 30, sabendo que a frase no primeiro 
bloco de texto rosa é “ Quanto aos ângulos o triângulo é classificado como retângulo”, no 
segundo é “Quanto aos ângulos o triângulo é classificado como obtusângulo” e no terceiro 


“Quanto aos ângulos o triângulo é classificado como acutângulo”. 
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TB classificação ângulos - Me via 
imer (0)se | EM EXE CD E 
então , ajustar classificação Angulos - [E Texto - Eicicl 


=) WE TS TA classificação Angulos - MM Texto - NF] 
Vea. 


RE Lada classificação Angulos -— 
NO 


Figura 30 - Blocos do aplicativo Il (e). 
Fonte: Elaborado pelos autores. 


CONCLUINDO O APLICATIVO 


Ao utilizar o aplicativo pode ocorrer do usuário não possuir a medida de todos os 
ângulos ou de todos os lados. Se as medidas informadas ao aplicativo estão compreendidas 
na definição da classificação, como por exemplo, se a única medida de ângulo for 102º, 
logo o aplicativo irá informar que se trata de um triângulo obtusângulo, pois o triângulo 
possui um ângulo maior que 90º (definição de triângulo obtusângulo). Porém, se as medidas 
informadas não estão compreendidas na definição, como por exemplo, informando somente 
17 e 25 como medidas dos lados, o aplicativo não apresenta nenhuma classificação quanto 
aos lados, pois dependendo da outra medida o triângulo pode ser isósceles ou escaleno. 
Assim, deixe claro ao usuário, de acordo com a figura 31, que se ele não possuir todas as 
medidas pode deixar o campo destinado às demais em branco, porém caso o aplicativo não 


informe a classificação ele deve buscar informar as demais medidas. 
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LOMUDU dE US LUMIPUNTINES VLUNVS NV vIDUdIZauU! 


Tamanho de telefone (505,320) w 


'Se você não tiver todas as medidas dos lados ou dos 
ângulos informe somente as medidas conhecidas, mas 

aso o aplicativo não informar a classificação (quanto aos 
jados ou ângulos) você deverá informar as medidas 
altantes 


a dos lados do triâng 


Clique aqui para classificar o triângulo quanto aos lados 


Informa a mndido don Ana do teiânmta 


lado. 1 


lado. 2 

lado 3 
DD classificação. Lados 
À classificação. lados 
À Legenda? 

ângulo 1 

ângulo. 2 

angulo. 3 
DD classificação. ângulos 


À classificação. Ângulos 


Figura 31 - Concluindo o aplicativo II. 


Fonte: Elaborado pelos autores. 


Lembre-se que a soma dos ângulos internos de um triângulo é 180º e que de 


acordo com a desigualdade triangular a soma da medida de dois lados é sempre maior 


que a medida do terceiro lado. Porém, pode ocorrer do usuário cometer algum equívoco e 


informar ângulos cuja soma dos três ângulos não seja 180º ou medida de um lado que seja 


maior do que a soma da medida dos outros dois lados, onde neste caso não se trata de 


medidas referentes a triângulos. Entretanto o aplicativo do jeito que está não sabe destas 


condições e acabará informando a classificação dos supostos triângulos de acordo com 


os comandos/definições que ele possui, por isso programe o aplicativo para ele informar o 


usuário se ele está cometendo algum dos equívocos, para isso siga a figura 32. 
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pre 


De 


ent-  ustar (CET lados - EM Texto - E 
dom, 


[iado 2 = Texio - JEAN ado 3 - WTexio - had 
então , ajustar classificação lados - IN Texio - E) 


[ânguio 3 - Wi Texto - H> - fSo) 
[classificação Ánguios * EM Texto + [o 
(imagem? + Mi Visvei + ES cercacero 


[ânguio 1 + M Texto + HEME árquio 2 - MTexo - JEAN irquio 3 - E Texo - Mando, 


Cânguio 1 + Mi Teo - NRME árquio 2 + NH Texo - JRAM irquio 3 - Ni Texo - End O 
classificação Anguios * EM Texto + Nua 


Figura 32 - Blocos do aplicativo II (f). 
Fonte: Elaborado pelos autores. 


Agora você deve testar o aplicativo para saber se ele está funcionando conforme 
o esperado, além disso você pode modificar o designer do aplicativo tornando-o mais 
interessante, para isso altere algumas propriedades dos componentes já existentes ou 
insira outros componentes que achar conveniente. A figura 33 representa o designer do 
aplicativo pronto, cujas imagens, cada uma representando uma classificação, são exibidas 


de acordo com a classificação do triângulo. 
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Se você não tiver todas as medidas dos lados ou dos ângulos 
informe somente as medidas conhecidas, mas caso o aplicativo não 
Informar a classificação (quanto aos lados ou ângulos) você deverá 
Informar as medidas faltantes 


Informe a medida dos lados do triângulo 


21 


lique aqui para informar novas medidas de 
lados 


Informe a medida dos ângulos do triângulo 
no 


40 


clique aqui para informar novas medidas de 
lados 


Quanto aos lados o triângulo é classificado como 
isósceles Quanto aos ângulos o triângulo é classificado como 
, obtusângulo 
/ lique aqui para informar novas medidas de 
ângulos 


Tránguio inósceios 


Informe a medida dos ângulos do triângulo 


triângulo ostusdeguio 


1 
1 
1 
1 
' 
' 
' 
1 
1 
' 
' 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
' 
1 
] 
' 
1 
1 
1 


Figura 33 - Interface do aplicativo II concluído. 
Fonte: Elaborado pelos autores. 


O aplicativo sobre classificação de triângulos está concluído, podemos assim 
desenvolver o próximo. Ao utilizar o aplicativo pode ocorrer do usuário não possuir a medida 
de todos os ângulos ou de todos os lados. Se as medidas informadas ao aplicativo estão 
compreendidas na definição da classificação, como por exemplo, se a única medida de 
ângulo for 102º, logo o aplicativo irá informar que se trata de um triângulo obtusângulo, pois 
o triângulo possui um ângulo maior que 90º (definição de triângulo obtusângulo). Porém, 
se as medidas informadas não estão compreendidas na definição, como por exemplo, 
informando somente 17 e 25 como medidas dos lados, o aplicativo não apresenta nenhuma 
classificação quanto aos lados, pois dependendo da outra medida o triângulo pode ser 
isósceles ou escaleno. Assim, deixe claro ao usuário, de acordo com a figura 31, que se ele 
não possuir todas as medidas pode deixar o campo destinado às demais em branco, porém 


caso o aplicativo não informe a classificação ele deve buscar informar as demais medidas. 
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APLICATIVO Ill: MEDIDAS DE TENDÊNCIA CENTRAL 


Vamos agora construir um aplicativo sobre as tendências centrais, com o objetivo de 
calcular a média aritmética, a média aritmética ponderada, a mediana e a moda. No caso 
do nosso aplicativo ele será elaborado para cálculos com no máximo cinco elementos, caso 


você queira pode fazer para um número maior ou menor de elementos. 


Nesse aplicativo precisaremos trabalhar com mais de uma tela para facilitar o 
desempenho e o desenvolvimento do aplicativo, assim após acessar a sua conta no App 


Inventor siga os passos descritos a seguir. 


* Tela 1 - Screen 1 

Para a elaboração do nosso aplicativo precisaremos trabalhar com mais de uma 
tela, desse modo desenvolvemos primeiro a tela 1. Na aba Designer arraste para a área de 
visualização quatro botões e mude os seus textos para “Média aritmética”, “Média aritmética 
ponderada”, “Mediana” e “Moda”, respectivamente. Cada um desses botões abrirá uma 


nova tela, por isso adicione quatro telas e para adicionar vá em “Adicionar Ecrã” na faixa 


verde superior na aba de Designer, como mostra a figura 34. 


ClMostrar os componentes ocultos no Visualizador 8 Screen1 
Tamanho de telefone (505,320) w E Botão! 
E Botãoz 
DD Botãos 

ERRA 
Novo Ecrã = Botão4 


Nome do ecrã 


Cancelar 


Figura 34 - Adicionando telas ao aplicativo. 
Fonte: Elaborado pelos autores. 


Agora na aba blocos programe os botões para que quando um botão for clicado ele 
abra uma outra tela, assim conforme a figura 35, onde os botões estão nomeados conforme 


a sua função. 
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quando (ETERNAS Clique 


fazer | abrir outro ecrã nomeDoEcra 


E TENOR Média Arit Pond - Reta 


fazer | abrir outro ecrã nomeDoEcra 


quando (LETERES Clique 


fazer | abrir outro ecrã nomeDoEcra 


[ti Mediana - Meir: 


fazer | abrir outro ecrã nomeDoEcra 


Figura 35 - Blocos do aplicativo III (a). 
Fonte: Elaborado pelos autores. 


Atela 1 está pronta, assim vamos para a próxima tela. 


* Tela 2 - Screen 2 

Essa tela será responsável pela média aritmética, assim iremos desenvolvê-la para 
tal. Logo na aba designer insira uma legenda e mude o seu texto para “Qual o número de 
elementos?”, uma caixa de texto e mude a dica para “Número de elementos”, uma legenda 
e mude o seu texto para “Quais são os elementos?”, insira também cinco caixas de texto e 
mude as suas dicas para “elemento 1”, “elemento 2º, ..., “elemento 5”, um botão e altere o 


seu texto para “Calcular a média aritmética” e por último uma legenda e exclua o seu texto. 


Você pode renomear os componentes para facilitar a programação e lembre-se 


Xttt+n o no nosso caso a média aritmética será 


que a média aritmética é dada por 
realizada sobre no máximo cinco elementos, ou seja, a média será calculada sobre um, 


dois, três, quatro ou cinco elementos. 


As cinco caixas de texto inseridas são destinadas para o usuário informar os 
elementos, porém como nem sempre serão cinco elementos, peça para o usuário atribuir O 


(zero) aos elementos inexistentes. Por exemplo, o usuário deseja calcular a média sobre os 


2+4+6 2+4+46+0+0 4 
3 


elementos 2, 4 e 6, está é dada por =4, o que equivale a 


Observe a figura 35 que representa a interface da tela 2, o que lhe auxiliará na 


inserção dos componentes. 
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Mostrar os componentes ocultos no Visualizador |] ScreenZ 


Tamanho de telefone (505,320) w AlLegenda? 
E» *“N*elementos 

A 'Legenda3 

À Legendas 

| J elemento 1 
Qual o número de elementos? | É |elemento 2 

É Jelemento. 3 
Quais são os elementos? É J elemento. 4 
Atribua O (zero) para os elementos inexistentes É Ielemento 5 


== Botão1 


A resultado 


Calcular a Média Aritmética 


Figura 35 - Interface da Tela 2 do aplicativo III. 
Fonte: Elaborado pelos autores. 


Agora na aba blocos reproduza com os blocos a equação da média, de acordo com 


a figura 36. 


quando “Clique 
fazer ajustar para 


Figura 36 - Blocos do aplicativo III (b). 
Fonte: Elaborado pelos autores. 


Nossa tela 2 está pronta, vamos agora desenvolver a tela 3. 


* Tela 3 - Screen 3 


A funcionalidade desta tela será calcular a média aritmética ponderada, lembrando 
Xy PitX> Po++Xn Pn 
Pitpo+-+pn 
o seu peso e para facilitar a inserção dos elementos visualize a figura 37. 


que a média aritmética ponderada é dada por + onde x, é o elemento p, e é 


Na aba designer insira uma legenda e mude o texto para “Na tabela abaixo informe 
os elementos e os seus respectivos pesos”, abaixo da legenda insira uma organização em 
tabela com duas colunas e seis linhas, onde na primeira linha e primeira coluna insira uma 
legenda e mude o texto para “Elemento” e na primeira linha e segunda coluna insira uma 


legenda e mude o texto para “Peso”. 
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Na primeira coluna insira cinco caixas de texto e mude a largura delas, pode ser 
30%, altere as dicas para “x, ..., “x”, na respectiva ordem das caixas, além disso pode 
também renomeá-las segundo as suas dicas. Na segunda coluna insira cinco caixas de 
texto e mude a largura delas, pode ser 20%, altere as dicas para “p”, ..., “p/”, na respectiva 


ordem das caixas de texto e caso queira as renomeie. 


ClMostrar os comp: ocultos no Visualizador e [screens OrganizaçãoEmTabela 


Interface de Usuário sig A “organizaçãoEmTabela 
Organização 


Es 
Ea] 
E] 
E] 


Multimédia 
Desenho e Animação 
Maps 

Sensores 

Social 


Armazenamento 


Figura 37 - Interface da tela 3 do aplicativo III (a). 
Fonte: Elaborado pelos autores. 


Ainda na aba de designer insira um botão e mude o texto para “Calcular a Média 
Aritmética Ponderada”, também uma legenda e exclua o seu texto. Observe o botão na 


figura 38, bem como as propriedades da tabela. 


LMostrar os componentes ocultos no Visualizador BS [screenz x1 
Tamanho de telefone (505,320) w À Legendas CorDeFundo 
8 = a Padrão 
e B OrganizaçãoEmTabelal E e 
À Legenda? piu 
k 


À Legendaz 
q D FonteNegrito 
f 
O 


Na tabela abaixo informe os elementos e os seus respectivc pl Fonteltálico 
Elemento x2 [| 
9 TamanhoDaFonte 
p2 
x3 
| FamiliaDaFonte 
p3 
padrão » 
x4 
Altura 
p4 
x5 
Calcular a Média Aritmética Ponderada Largura 
p5 a 


“5 Botãol 
A Legenda3 


Renomear Apagar MultiLinha 


Figura 38 - Interface da tela 3 do aplicativo III (b). 
Fonte: Elaborado pelos autores. 


Do mesmo modo como ocorreu na tela 2, aqui o usuário pode querer calcular a 
média aritmética ponderada de um, dois, três, quatro ou cinco elementos, de modo que 


quando for menos que cinco elementos o usuário deve atribuir zero ao(s) elemento (s) 
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inexistente(s) e ao seu peso correspondente. 
Já temos os componentes necessários para a tela 3, vamos agora fazer a 
programação. Na aba blocos reproduza a equação para calcular a média aritmética 


ponderada, como mostra a figura 39. 


E Botão! - Mei 
(5-4 DRE  Legenda3 - |M Texto - Ec] 


Figura 39 - Blocos do aplicativo III (c). 
Fonte: Elaborado pelos autores. 


Atela 3 está pronta, seguimos agora para a tela 4. 


* Tela 4 - Screen 4 

A aba designer da tela 4 está representada na figura 40, sendo que a tela 4 será 
a responsável pela mediana, lembrando que para determinar a mediana de um conjunto 
estes valores devem ser postos em ordem crescente ou decrescente, de modo que se a 
quantidade de elementos for ímpar a mediana corresponde ao valor central e quando a 
quantidade for par a mediana é obtida realizando a média aritmética dos dois elementos 
centrais. 

Primeiramente, na aba designer insira uma legenda e mude o texto para “Qual o 
número de elementos?”, uma caixa de texto, uma legenda e mude o texto para “Informe 
os elementos em ordem crescente ou decrescente”, insira cinco caixas de texto e mude as 
dicas para “elemento 1”, ..., “elemento 5” na respectiva ordem, um botão e mude o texto 


para “Determinar a Mediana” e por último uma legenda e exclua o seu texto. 
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L Mostrar os componentes ocultos no Visualizador o) | Screen4 eemento s 
Tamanho de telefone (505,320) w A Legendaz CorDerundo 
1 |Nº Elementos Eee 
AlLegendas Ativado 
| Jelemento 1 
FonteNegrito 
1 |elemento 2 | 
Qual o número de elementos? | | 1] elemento. 3 Fonteltálico 
[8] 


1 | elemento. 4 
TamanhoDaFonte 
140 


Informe os elementos em ordem crescente ou decrescente. 1 elemento 5 
ES Botão 
FamiliaDaFonte 


A |Legendal eme 
padrão = 


Altura 


Automático. 


Largura 


Automático. 


Determinar a mediana Dica 


Elemento 3 


Renomear | Apagar MultiLinha 


Figura 40 - Interface da tela 4 do aplicativo Il. 
Fonte: Elaborado pelos autores. 


Na aba blocos programe os blocos segundo o conceito de mediana, de acordo com 


a figura 41. 


o o [Nº Elementos - BM Texto - M=-185| 

O a Legenda - Texto - No CNO. elemento 3 - EB Texto -| 
n— 

Ed dus | Nº Elementos - BM Texto - = - 1M4] 

(1 E TS ME Legenda? - NM Texto - Rc] 


Nº Elementos - JM Texto - =" 3 
então ajustar (CTEICENES - CEIDES para CSS (EU 


CU TSM Legenda —| para 


Figura 41 - Blocos do aplicativo III (d). 
Fonte: Elaborado pelos autores. 


Nossa tela 4 está pronta! 


* Tela 5 - Screen 5 
Essa tela será responsável por determinar a moda, que é o elemento que mais se 
repete em um conjunto. Assim, na aba designer insira uma legenda e mude o texto para 


“Informe os elementos e o número de vezes que ele aparece”, uma legenda e mude o texto 
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para “Para os elementos inexistentes atribua O (zero) ao elemento e a sua frequência”. 


Abaixo insira uma organização em tabela com duas colunas e seis linhas, de 
modo que na primeira linha e primeira coluna insira uma legenda e mude o texto para 


“Elementos”, na primeira linha e segunda coluna insira uma legenda e mude o texto para 


ty 9 


X, 


“Frequência”, na primeira coluna insira cinco caixas de texto e altere a dica para “x”, ...,' 
respectivamente e na segunda coluna insira cinco caixas de texto e altere a dica para “p”, 
-- “P,, respectivamente. Para finalizar insira um botão e mude o texto para “Determinar 
a moda” e também uma legenda e exclua o seu texto, agora observe a interface da tela 5 


representada na figura 42. 


Mostrar os componentes ocultos no Visualizador & Bócees = 
Tamanho de telefone (505,320) » qa E 
AlLegendas | RED 
a Ativado 
& EBorganizaçãoEmTabela tivado 


à | Legenda? 

E FonteNegrito 
£ Legendaz O 
Informe os elementos e o número de vezes que ele aprece IIyw Fonteltálico 
Para os elementos inexistentes atribua O (zero) ao elementc In fc) 


TamanhoDaFonte 


Frequência 


14.0 


FamíliaDaFonte 
padrão - 
Altura 


Automático. 


Largura 


Determinar a moda 


E Botão1 


Al Legendas 
Renomear | Apagar MultiLinha 
O 


SomenteNúmeros 


Figura 42 - Interface da tela 5 do aplicativo III. 
Fonte: Elaborado pelos autores. 


Para concluir a tela 5 encaixe os blocos segundo a figura 483. 
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quando (7 TES .Cique 


fazer O se 


Figura 43 - Blocos do aplicativo III (e). 
Fonte: Elaborado pelos autores. 
* Finalizando o aplicativo 
Nosso aplicativo está basicamente pronto, só precisamos acrescentar alguns botões 
nas telas para complementar. Nas telas 2, 3, 4 e 5 insira dois botões e programe o primeiro 
para o usuário informar novos valores e o outro botão para retornar a tela 1. Observe estes 


botões na tela 2, da figura 44. 
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EJN*elementos 


À Legenda3 

À Legendas 

É elemento.1 
Qual o número de elementos? É lelemento. 2 

É lelemento.3 
Quais são os elementos? + elemento. 4 
Atribua O (zero) para os elementos inexistentes É Jelemento.5 


E Botão 


E potãos 


Calcular a Média Aritmética 


Renomear Ap; 


Voltar à tela inicial Multimédia 


Figura 44 - Finalizando o aplicativo III. 
Fonte: Elaborado pelos autores. 


Na figura 45 acompanhe a programação desses dois botões acrescentados. 


quando “Clique 
fazer ajustar E para |. obter valor inicial 
ajustar para |, obter valor inicial 
ajustar para ||. obter valor inicial 
ajustar para ||. obter valor inicial 
ajustar , para |. obter valor inicial 
ajustar para |, obter valor inicial 
, ajustar para obter valor inicial 


quando Clique 


fazer | abrir outro ecrã nomeDoEcra 


Figura 45 - Blocos do aplicativo III (f). 
Fonte: Elaborado pelos autores. 


Faça o mesmo nas demais telas e você pode utilizar a sua criatividade e tornar o 


aplicativo mais apresentável, assim como o exemplo trazido na figura 46. 
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mm 
jl 


Figura 46 - Aplicativo Ill concluído. 
Fonte: Elaborado pelos autores. 


Pronto! O aplicativo Ill está concluído e vamos continuar desenvolvendo mais alguns 


aplicativos. 
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APLICATIVO IV: DESCOBRINDO O LADO DESCONHECIDO 
DE UM TRIÂNGULO RETÂNGULO 


Vamos construir um aplicativo matemático, cuja função é descobrir a medida do 
lado desconhecido de um triângulo retângulo através da fórmula do Teorema de Pitágoras. 
Para tal acesse em seu navegador o App Inventor 2 e em seguida inicie um novo projeto 
e o nomeie, como sugestão pode nomear como “descobrindo o lado desconhecido de um 


triângulo retângulo”. 


* Na aba designer 

O triângulo possui três lados, por isso utilizamos três organizações horizontais, 
como na figura 47, de modo a inserir dentro de cada, uma legenda e uma caixa de texto, 
onde o usuário possa informar quais são as medidas conhecidas dos respectivos lados. Em 
relação às legendas e as caixas de textos, altere o texto das legendas para “hipotenusa”, 
“cateto 1º e “cateto 2”, respectivamente, depois exclua a dica das caixas de textos e 
selecione na propriedade de cada caixa, a opção “somente número”. Selecionando esta 
opção o aplicativo fornecerá ao usuário um teclado somente com números, evitando que 
o usuário informe por um equívoco letras, ou números negativos como medidas dos lados 


do triângulo. 


Interface de Usuário 


— TT 


> 


CaixaDeTexto 


Renomear Apagar 


colheHora 


Multimédia 


Enviar Ficheiro 


Organização 


Multimédia 


Figura 47 - Interface do aplicativo IV (a). 
Fonte: Elaborado pelos autores. 


Em seguida, de acordo com a figura 48 insira dois botões e mude os seus textos 
para “qual a medida do lado desconhecido?” e “limpar”, com o intuito de programá-los 
para efetuar o cálculo que resulta na medida procurada e limpar as informações da tela do 
usuário, que forem emitidas e recebidas pelo aplicativo. Insira também uma legenda para 


informar o resultado (medida procurada) e em propriedades, exclua o seu texto. 
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É 


TemanhoDaFonte 


FamiliaDaFonte 


padrão » 


Notificadi 


Renomear Apagar 4 
Multimédi joTexto 


Enviar Ficheiro 


Organização 


Multimédia 


Desenho e Animação 


Maps 
Figura 48 - Interface do aplicativo IV (b). 
Fonte: Elaborado pelos autores. 
Com todos os componentes necessários para o funcionamento do aplicativo 


inseridos vamos para a aba blocos, a fim de programar as suas funções. 


* Na aba blocos 

Queremos que quando o “Botão 1” for clicado o aplicativo nos dê a medida do lado 
desconhecido e para isso iremos utilizar a fórmula do Teorema de Pitágoras (hipotenusa)? = 
(cateto 1)2 + (cateto2)2, lembrando que a hipotenusa é o maior lado do triângulo, portanto a 
medida do cateto 1 e a medida do cateto 2 devem ser menores que a medida da hipotenusa. 


Logo temos quatro situações possíveis de lados desconhecidos: 


|. | Olado desconhecido é a hipotenusa > hipotenusa = J(catetol)? + (cateto?)? 


Il. O triângulo retângulo é um triângulo isósceles, ou seja, seus dois catetos 
possuem as mesmas medidas e que neste caso são desconhecidas — 


cateto! = cateto 2 = (hipotenusa)? 
N] 2 


HI. O lado desconhecido é o cateto 1 > cateto 1 = al (hipotenusa)? — (cateto 2). 


IV. O lado desconhecido o cateto 2 > cateto 2 = v(hipotenusa)?— (catetol)? 


Para cada uma das situações utilizamos um bloco de controle “se-então” e as 


respectivas fórmulas dadas acima. Observe a programação para a primeira situação dada 
na figura 49. 
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CD Es e: 
ESTA Legenda RESULTADO - NM Texio - ESA: 


E UM CaixaHIPOTENUSA - BR Texto - EOo 


E CaixaHiPOTENUSA - Mi CorDeTexio - 
o 


Figura 49 - Blocos do aplicativo IV (a). 
Fonte: Elaborado pelos autores. 


Na primeira situação o lado procurado é a hipotenusa, para isso utilizamos como 
condicionante que o texto na caixa destinada para a hipotenusa seja vazio, pois o usuário 
deve informar somente as medidas conhecidas, deixando a caixa da medida desconhecida 
sem nada digitado. Foi programado para que a medida procurada apareça na legenda 


destinada ao resultado, que se encontra abaixo do botão para calcular e também na caixa 


de texto do lado procurado, porém na cor vermelha. 


O mesmo foi realizado para as demais situações conforme a figura 50. 


[CabaCATETO! - Mi Texto - =: 


18 LegendaRESULTADO - NM Texto - EE cRRON 


Figura 50 - Blocos do aplicativo IV (b). 
Fonte: Elaborado pelos autores. 
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Agora pegue o bloco “Quando botão calcular. Clique fazer”, esse bloco nos diz que 
quando o botão calcular for clicado ele irá realizar os passos determinados pelos blocos 


que serão encaixados dentro dele. Assim encaixamos os blocos como mostra a figura 51. 


quando 


fazer 


RE SCI Legend LTADO * Mi Texto - Rc] juntar 


[E TS Ia Leger 


| CaixaHIPOTENUSA - BB Texto - Ely 
E cia CaixaCATETO1 - Mi Texto - Ec] 


Figura 51 - Blocos do aplicativo IV (c). 
Fonte: Elaborado pelos autores. 


O aplicativo já está programado para calcular e apresentar a medida desconhecida 
do lado triângulo retângulo, agora vamos programar o botão limpar conforme a figura 52. 
Queremos que quando o botão limpar for clicado, tudo o que foi digitado pelo usuário no 
aplicativo e o resultado que o aplicativo informou sejam excluídos, ou seja, o aplicativo 
apresentará novamente a tela de início. 
TEM BotãoLIMPAR - Rent 
fazer ajustar (SEREI! US/ Texto - Mir] obter valor inicial 


Etc CaixaCATETO1 = DM Texto - Mic asd 
ETtSc  CaixaCATETO? - EM Texto - Mic obter valor inicial 


ajustar (ET: RESULTADO (EE para | obter valor inicial 
ajustar aHIPC NUS  CorDeTexto - NE] 


ajustar 


its  CaixaCATETO2 - PM CorDeTexto - Nur 
Nm 


Figura 52 - Blocos do aplicativo IV (d). 
Fonte: Elaborado pelos autores. 

Ao clicar nesse botão o texto das caixas de texto e da legenda destinada ao resultado 
voltarão para o valor inicial, onde o valor inicial corresponde a uma caixa de texto vazia. 
Importante salientar, que ao invés de utilizar o bloco de “obter valor inicial” pode-se utilizar o 
bloco dos textos destinado a escrever texto, porém com ele vazio (sem nada escrito). Como 
durante o uso do aplicativo as cores de algumas caixas de textos mudam para o vermelho, 


programamos para que a cor de todas as caixas de textos retorne ao preto. 


Assim, nosso aplicativo já está pronto, agora você deve testá-lo para ver se o mesmo 
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está funcionando conforme o esperado e pode incrementá-lo. Observe a figura 53, onde a 
cor de alguns textos foi modificada, o Screen 1 foi renomeado para “lado desconhecido de 
um triângulo retângulo”, a organização horizontal foi alterada para se localizar no “centro”. 
Acima das três organizações horizontais inserimos uma legenda, com o intuito de orientar 
o usuário que deve informar as medidas dos lados conhecidos e abaixo dos componentes 
já inseridos foi inserida uma imagem, da qual não deixamos visível, de modo que se torne 


visível quando o botão calcular for clicado. 


terface de Usuário 


Figura 53 - Incrementando o aplicativo IV. 
Fonte: Elaborado pelos autores. 


Além destas modificações, você pode alterar e acrescentar mais coisas deixando o 


aplicativo mais atraente, como mostra a figura 54. 
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Lado desconhecido de um triângulo retângulo Lado desconhecido de um triângulo retângulo 


32.72614 


LIMPAR LIMPAR 


HIPOTENUSA HIPOTENUSA 


Figura 54 - Aplicativo IV concluído. 
Fonte: Elaborado pelos autores. 
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APLICATIVO V: ENCONTRANDO AS RAÍZES DA EQUAÇÃO 
DE 2º GRAU 


Vamos construir agora um aplicativo matemático que encontre as raízes da equação 
de segundo grau, semelhante ao aplicativo IV que encontra a medida desconhecida do lado 
de um triângulo retângulo. Assim, acesse a plataforma do App Inventor e em seguida inicie 


um novo projeto e o nomeie, pode chamá-lo de “RaizesDaEquaçaoDe2Grau”. 


* Na aba Designer 

O objetivo do aplicativo é informar quais são as raízes de uma equação do segundo 
grau após ele conhecer os seus coeficientes, os quais devem ser informados pelo usuário. 
Para criar um espaço destinado ao usuário informar os coeficientes insira uma organização 
horizontal, dentro da organização arraste três legendas e três caixas de texto, intercalando, 
primeiro legenda e depois caixa de texto. Depois altere o texto das legendas para “a”, “pb” 
e “c”, respectivamente, correspondendo aos três coeficientes da equação de segundo grau 
ax?+ bx + c = 0, também exclua o texto das caixas de texto e para facilitar a programação 


renomeie as caixas de texto, pode chamá-las de “caixaA”, “caixaB” e “caixaC”. 


Em seguida, como na figura 54, acima da organização insira uma legenda e mude 
o texto para “Informe os coeficientes”. Além disso, o título da sua tela pode ser alterado, 
clicando em Screen1 que é o nome atual da sua tela e em suas propriedades altere o título, 


como sugestão pode colocar “Equação de 2º grau: ax + bx + c=0”. 


Nome da Tela Equação de 2º grau: ax? +bx+c=0 


Informe os coeficientes Legenda 


Legendas 
Organização 
horizontal 


Caixas de texto 


Figura 55 - Interface do aplicativo V (a). 
Fonte: Elaborado pelos autores. 


O aplicativo já possui espaço para receber as informações do usuário, agora 


precisamos criar um espaço para o aplicativo emitir informações, ou seja, para ele informar 
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quais as raízes da equação cujos coeficientes foram informados pelo usuário. Para isso 
arraste um botão para a área de visualização, preferencialmente abaixo dos componentes 
já inseridos, este botão terá como função avisar o aplicativo que ele deve calcular as raízes 


e informá-las. 


Ainda referente ao botão, mude o texto para “Quais são as raízes da equação?” e 
caso queira renomeie. Em seguida, abaixo do botão insira duas organizações horizontais e 
em cada organização arraste duas legendas, mude o texto das primeiras legendas dessas 
organizações, para “Raiz 1:”e “Raiz 2:”, respectivamente e das segundas legendas apague 


o texto e as renomeie, como mostra a figura 55. 


es , Nenhum 
B EB organizaçãoHorizontall api 
A] Legendaa E 
Caixaa E 
= Fonteltálico 
Equação de 2º grau: ax? + bx+c=0 *LegendaB [] 
Informe os coeficientes: CaixaB TamanhoDaFonte 


*|Legendac bd 


é FamiliaDaFonte 
Botão AD 
Organizações z 

Spurs & EBorganizaçãoHorizontal HTMLFormat 
7 d horizontais O 
egentas A LegendaX1 = 

TemMargens 
“| LegRaizl 


a RB, nienÉ sad 7! 
& ESorganizaçãoHorizontals Alta 


À Lege Automático 


A 'LegRaiz2 


Largura 


ES Botão1 


Renomear Apagar 


Multimédia 
Enviar Ficheiro CorDeTexto 
E esiso 


Figura 56 - Interface do aplicativo V (b). 
Fonte: Elaborado pelos autores. 


Para facilitar o uso do aplicativo para uma nova equação insira mais um botão e 
mude o seu texto para “limpar”. Observe a figura 56 que traz o botão limpar inserido e 


algumas propriedades dos componentes que foram alteradas. 
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COEFICIENTES 


[0] 


oHorizontall 


Quais são as raízes da equação? Largura 


Imagem 
nhum 
LIMPAR 


mm [10 


Altura 


Largura 


À Legendax2 


= Imagem 
» 


Renomear Apagar 


Multimédia 


Enviar Ficheiro 


Figura 57 - Interface do aplicativo V (c). 
Fonte: Elaborado pelos autores. 


Nosso aplicativo já possui todos os componentes necessários para o seu 
funcionamento, agora vamos programá-los, mas para isso precisamos levar algumas 
condições em consideração. 

* Condições 

Sabendo que a equação de segundo tem o formato ax + bx + c=0,onde a, bec 


são coeficientes reais e a z 0, tem-se que: 

a. Se a=0não teremos uma equação do segundo grau; 

b. Seb=Oteremosx= += isso implica que a raiz 1 será dada por E ea raiz 
2será — JE De modo que, para essas duas raízes pertencerem aos números 
reais, precisamos ter: 

* | Se cfor maior ou igual a zero, então a deve ser menor que zero; 


* || Se cmenor ou igual a zero, então a deve ser maior que zero; 


c. Seb=0€ea condições dadas em b) não forem cumpridas, a equação de 2º grau 
não possui raiz real; 


d. Sec=Otemosax+bx=0->x(ax+b)=0, assim a raiz 1 é nula (e a raiz 2é 
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dada por =. 


a 
e. Para facilitar a resolução das equações de segundo grau temos a fórmula re- 
solutiva, sendo x dado por: x = bt VA onde 4 = b2- 4ac. A fórmula resolutiva 

2a 


pode ser utilizada para resolver qualquer equação de 2º grau; 
f. Sea4A<0a equação não possui raízes reais; 


” , g —b 
g. SeA=0,então raiz 1 =raíz2= = 
“a 


h. Se4>0entãoraizlt="""“ eraíz2= =b-vA : 
2a 2a 
Depois de todas as condições e aspectos matemáticos sobre as equações de 2º 


grau serem analisados estamos prontos para programar o aplicativo. 


* Na aba Blocos 

Agora iremos apresentar dois modos de programar os componentes, cabe a você 
escolher o modo que achar conveniente, porém apesar de poder optar por um ou outro 
modo é importante que leia e procure compreender como ocorre a programação dos 
componentes nos dois modos, isso aumentará sua bagagem de conhecimento acerca da 


programação dos componentes podendo lhe auxiliar na programação de futuros aplicativos. 


O modo | explora detalhadamente todas as condições matemáticas apresentadas 
anteriormente, sendo uma programação um tanto extensa. Já o modo Il faz o uso da fórmula 
resolutiva, onde criando um procedimento para o Delta a programação se torna simples e 


prática. Veja os dois modos a seguir. 
Modo | 


Clique no componente “bloco Raízes” e arraste o bloco “quando “BotãoRAIZES”. 
Clique fazer” para a área de visualização. Esse bloco nos diz que quando o botão for 


clicado ele irá realizar os passos determinados pelos blocos que serão encaixados a ele. 


Agora iremos utilizar as condições citadas anteriormente, de modo que para condição 


utilizaremos um “bloco de controle - se então” que posteriormente serão encaixados dentro 


do “bloco raízes” já inserido. 

Da condição 1, temos que se a for igual a zero a equação não possui raízes reais. 
Traduzindo isso para os componentes do aplicativo, segue que se o texto da “caixaA” for 
igual a zero, então as legendas “LegRaiz1” e “LegRaiz2” mudaram o seu texto para “ não 


é uma equação do 2º grau”, conforme a figura 57. 
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= CaixaA - Mi Texo - N=- o) 
EIS LegRaizi * MN Texto * Ed 


então 


Figura 58 - Blocos do aplicativo V (a). 
Fonte: Elaborado pelos autores. 


Seguindo as condições dadas em (b), monte os blocos de acordo com a figura 59. 


es caso M eacsnmo 


Es cs o MM eantesmo 


então | ajustar (EEGEES 


ajustar (EF di : - : [irocar sinal + PM CaixaC » WTexio - BEAN CaixaA - MTexto - ] 


Figura 59 - Blocos do aplicativo V (b). 
Fonte: Elaborado pelos autores. 


Observe na figura 59 que se a condição dada em b) for cumprida, o texto das 
' =» =€ ==: , 
legendas (raiz 1 e 2) serão alteradas para é e- - , respectivamente, lembrando que 


os blocos azuis são do item matemática e os blocos em verde claro se encontram no item 


lógica. E da condição c), temos a montagem representada na figura 60. 


então ajustar (5 
ajustar (E 
- 


Figura 60 - Blocos do aplicativo V (c). 
Fonte: Elaborado pelos autores. 


Da condição d) segue a figura 61. 


SE CaxaC - MTexo - = NO) 


então | ajustar (E37 


ajustar (EE 


Figura 61 - Blocos do aplicativo V (d). 
Fonte: Elaborado pelos autores. 


Agora realize a programação dos blocos em relação a condição e), observando a 


figura 61 que contém as duas primeiras partes da programação. 
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oa LegRaiz! + Ni Texo + No 
add LegRaiz2 + Wi Texto + NO 


ajustar (CECITIES . GCXTEB para 


add LegRaiz2 + B8 Texio * DO 


he 


Figura 62 - Blocos do aplicativo V (e). 
Fonte: Elaborado pelos autores. 


Agora observando a figura 63, conclua a programação referente a condição e). 


então ajustar (US5E ECTEA para CaixaB +) 


= 


Figura 63 - Blocos do aplicativo V (f). 
Fonte: Elaborado pelos autores. 


Agora só precisamos juntar todos os blocos das figuras 61 e 62. 
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então ajustar 


ajustar 
vs 


[Caixaá - Ni Texto - > - Jo JRLS JN Caxac - MTexio - E <- o 


[CaixaA - Mi Texto - <- O JRLS = MEN Caxac - Nexo - Ez - o 
então ajustar 


ajustar 


[CaixaA - MTexio - > - JO JRLS JN Caxac - WTexio -N>- o) 


Figura 64 - Blocos do aplicativo V (e). 
Fonte: Elaborado pelos autores. 


O aplicativo já está pronto para informar quais são as raízes da equação de 2º 
grau, após os coeficientes serem informados e o botão raízes for clicado. Assim, o primeiro 
modo de programar os blocos foi concluído e vamos agora apresentar o segundo modo de 
programar os blocos. 


Modo Il 


Primeiramente crie um procedimento para o cálculo do delta, conforme apresentado 


na figura 64. 


AS 
Rr [—— em 
Boitionares 

[a procedimento 
resultado 


B Cores 


BD variáveis 


e screen 
|] Controle 
[| Lógica 
E Texto 
Buistas 


1 Nirtinnarias 


Figura 65 - Bloco do aplicativo V (f). 
Fonte: Elaborado pelos autores. 
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Queremos que quando o “BotãoRAIZES” for clicado as raízes da equação sejam 
informadas, para isso reproduzimos a fórmula resolutiva com os blocos, conforme a figura 
65. 


Clique 
atu: d Deita r E <* MO. 
E TT=S = d LegRaizi » Wi Texto *r Ed 
Cegos LegRaiz2 » Wi Texto * N.=F 


(REM LegRaizt * Wi Texto » NF 


ajustar (REEZED . (ESCHD pera 


Figura 66 - Bloco do aplicativo V (9). 
Fonte: Os autores. 


O modo Il de programação está concluído com o nosso aplicativo pronto para 


informar as raízes da equação de segundo grau dada pelo usuário. 


* Complementando o aplicativo 

Tanto no modo | quanto no modo Il você deve programar o botão limpar como na 
figura 66, de modo que quando ele for clicado os dados informados pelo autor e pelo 
aplicativo sejam excluídos, tornando o aplicativo pronto para informar as raízes de uma 


nova equação de 2º grau. 


quando 

fazer ajustar 
ajustar 
ajustar 


ajustar 


ajustar 
ER 


Figura 67 - Bloco do aplicativo V (h). 
Fonte: Elaborado pelos autores. 


Veja na figura 67 a interface do aplicativo pronto, lembrando que você pode 
personalizar o seu aplicativo a fim de torná-lo atrativo visualmente. Além do mais, não 


esqueça de testar seu aplicativo, para saber se ele está funcionando conforme o desejado. 
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Equação de 2º grau: ax +bx+c=0 


Figura 68 - Aplicativo V concluído. 
Fonte: Elaborado pelos autores. 
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APLICATIVO Vl: OPERAÇÕES ENTRE MATRIZES E O 
DETERMINANTE DE UMA MATRIZ 


Sabemos quanto o estudo das matrizes é importante, bem como os demais conteúdos 
matemáticos e a fim de facilitar os cálculos envolvendo matrizes iremos construir aqui um 
aplicativo que resolve adição, subtração e multiplicação entre matrizes com no máximo 3 


linhas e 3 colunas e que além disso calcule o determinante de matrizes 1x1, 2x2 e 3x8. 


* Informações a serem consideradas 

Primeiramente há algumas informações que precisam ser levadas em consideração, 
sendo que para a elaboração deste aplicativo precisaremos trabalhar com seis telas no 
App Inventor 2, de modo a facilitar a programação e tornar o aplicativo organizado. As três 
primeiras telas consideradas como principais, terão a seguinte organização: 


* | Tela 1: Será a tela inicial, onde o usuário irá definir se ele deseja efetuar opera- 
ções (adição, subtração e multiplicação) ou calcular o determinante; 


* Tela 2: Contemplará as três operações entre matrizes, a adição, a subtração e 
a multiplicação; 
* | Tela 3: Aterceira tela será direcionada ao cálculo do determinante. 


*- O elaborador do aplicativo deve possuir conhecimento acerca de matrizes, em 
especial sobre: 


* | Representação genérica de uma matriz; 
* Adição e subtração de matrizes; 


* Multiplicação entre matrizes, lembrando que a multiplicação de duas matrizes 
só é possível quando o número de colunas da primeira é igual ao número de 
linhas da segunda matriz; 


* | Cálculo do determinante de matrizes 1x1, 2x2 e 3x3, bem como a regra de 
Sarrus. 
Agora levando em consideração as informações expostas vamos desenvolver o 


aplicativo, de acordo com cada uma das seis telas. 


* Tela 1 - Screen1 

Siga os passos de acesso ao App Inventor 2, crie um novo projeto e o nomeie, 
assim você será direcionado para a aba de designer que contém a primeira tela (screen 1). 
Na aba designer, conforme representada na figura 69, arraste dois botões para a área de 
visualização, altere o texto do primeiro para “Adição, Subtração e Multiplicação de Matrizes” 
e o renomeie para “operações”, também altere o texto do segundo botão para “Determinate” 


e renomeie para “determinante”, depois acima dos botões arraste uma legenda e mude o 
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seu texto para “Faça a sua escolha clicando em um dos botões”. 


Faça a sua escolha clicando em um dos botões: 


Adição, Subtração e Multiplicação de Matrizes 


DETERMINANTE 


Figura 69 - Interface da tela 1 do aplicativo VI. 
Fonte: Elaboração dos autores. 


Agora na aba blocos queremos que o “botão operações” nos leve a tela 2 e que o 


“botão determinante” nos leve a tela 3, para isso faça como na figura 70. 


Fo Tc go O Operações » Meter 


fazer | abrir outro ecrã nomeDoEcra 
As 


quando “Clique 


fazer | abrir outro ecrã nomeDoEcra 
o 


Figura 70 - Blocos do aplicativo VI (a). 
Fonte: Elaboração dos autores. 


Assim, nossa primeira tela está programada, vamos agora programar a segunda 


tela. 


* Tela 2 - Screen 2 
Na aba Designer você precisa adicionar mais uma tela clicando em “Adicionar Ecrã”, 


como mostra a figura 71. 
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o 


Visualizador Componentes 
Mostrar os componentes ocultos no Visualizador S TI screen 

Tamanho de telefone (505,320) w A Lege 

g operi 

DD deter 


Novo Ecrã 


Nome do ecrã 


Faça a sua escolha cl 


Adição, Sul Cancelar 


Figura 71 - Adicionando tela no aplicativo VI. 
Fonte: Elaborado pelos autores. 


Nosso aplicativo efetuará operações entre duas matrizes com uma, duas ou três 


linhas e/ou colunas, ou seja, a maior ordem possível da matriz para o aplicativo realizar 


operações é 3x3. Chamaremos a primeira matriz de A e d segunda de matriz B, onde você 


deve saber a relembrar a forma de representação genérica de uma matriz. 


Assim, precisamos criar na aba de designer um espaço para o usuário informar as 


duas matrizes, cuja representação se dá na figura 72, assim para a primeira matriz faça: 


Insira uma organização em tabela e em propriedades mude o número de linhas 
e de colunas para 3; 


Dentro da tabela insira nove caixas de texto; 


Como as caixas de texto excedem o espaço da tabela mude a largura das cai- 
xas de texto para 20 ou 30 por cento; 


Apague o texto e coloque como dica de cada caixa de texto o elemento gené- 
rico da matriz A o qual ela representa. Por exemplo, a primeira caixa de texto 
está na posição do elemento a,, portanto a dica desta caixa de texto será a,,; 


Renomeie as caixas de textos, sendo o seu novo nome o mesmo que a dica da 
caixa de texto; 


Acima da matriz A (organização horizontal), insira uma legenda e mude o seu 
texto para “Informe os coeficientes da 1º matriz (matriz A), atribuindo O (zero) 
para os valores inexistentes”. 
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e) EB organizaçãoEmTabelal 


Lam 


Informe os coeficientes da 1º matriz (matriz À), atribuindo O Da12 
ra Os valores inexistentes: 


! 
Lia 33 
À |Legenda2 
& EBorganizaçãoEmTabelaz 
Lp mn 
Lp 21 
Lp 31 


Figura 72 - Interface da tela 2 do aplicativo VI (a). 
Fonte: Elaborado pelos autores. 


Agora vamos criar o espaço para a matriz B, para isso você pode seguir os mesmos 
passos realizados para a matriz A, ou copiar (Ctrl C) e colar (Ctrl V) a matriz A e somente 


alterar as dicas das caixas de textos e os seus respectivos nomes e nas propriedades da 


tela 2 (Screen 2) clique na opção rolável. 


Agora o aplicativo já possui um espaço para receber as duas matrizes, a fim de 
efetuar as operações. Seguindo, precisamos proporcionar ao usuário a opção de escolha 


da operação desejada (adição, subtração ou multiplicação) além de um espaço para o 


E ado 

Ativado 

FonteNegrito 

[mm] 

Fonteltálico 

[| 

TamanhoDaFonte 
14.0 

FamiliaDaFonte 


padrão » 


Altura 


Automático 


Largura 


20 percentual 


Dica 


aplicativo informar o resultado (matriz C). Então, observando a figura 73, faça: 


*- Insiratrês botões; 


» 


* Altere o texto e os renomeie para “adição”, “subtração” e “multiplicação”, res- 


pectivamente; 


* | Para a matriz resultado insira uma organização em tabela, dentro desta orga- 
nização insira nove legendas e exclua o seu texto e as renomeie conforme os 


elementos de uma matriz genérica C. 
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g Adição 


ED subtração 


ED Multiplicação 


D5 OrganizaçãoEmTabela3 


Laje 


Informe os coeficientes da 2º matriz (matriz B), atribuindo O Ajc 21 
(zero) para os valores inexistentes: 


Ale 31 
Alei2 
Alc 22 
Ale 32 
Alci3 
ADIÇÃO Ale 23 


SUBTRAÇÃO Alec 33 


MULTIPLICAÇÃO Renomear Apagar 


Enviar Ficheiro 


Figura 73 - Interface da tela 2 do aplicativo VI (b). 
Fonte: Elaborado pelos autores. 


Temos todos os componentes necessários para o funcionamento da tela 2, agora 
precisamos programá-los, mas antes lembre-se de como ocorre a adição, subtração e 


multiplicação entre duas matrizes A e B. 


Seguindo, na aba blocos queremos que conforme cada botão for clicado apresente 
o respectivo resultado, desse modo reproduzimos com os blocos o processo das operações 


entre matrizes. Primeiramente programamos o botão adição, de acordo com a figura 74. 


quando lição - Mein 
fazer ajustar CHEGES 


ajustar 
ajustar 
ajustar 
ajustar 
ajustar 
ajustar 


ajustar 


ajustar 
a 


Figura 74 - Blocos do aplicativo VI (b). 
Fonte: Elaboração dos autores. 


Agora programamos o botão subtração como mostra a figura 75. 
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E TE + subiração - Mefe1: 
ajustar CEIES 


fazer 


ajustar o 31 Mrexto À 
Etc c 21 - NTexio | Ta 12 - Texto - [b12-R 

ajustar CEZES a 22 - WTexio -| [b 22 - Mi Texio - | 

Eid c 23 - Mi Texto -| a 32 - Texto - [b 32 - Mi Texto -| 

ajustar CEIES . (EXU Fa 13 - MTexi CEEB 

ahustar CRPRD - (CAOS 
Etc c 33 - Wi Texto | = Texto - “DEOD ê 
SR 


l 
IJ 


Figura 75 - Blocos do aplicativo VI (c). 
Fonte: Elaborado pelos autores. 


Agora programamos o botão multiplicação, de acordo com a figura 76. 


quando ( iplicação - Re io 
fazer ajustar CHIES HS para 


ajustar 


“CEB COOD * CHE GB 
DUB GOD * COB Gm 
“GD GOD - CD CD 
CT: EE T=1 
CEB (08 | 
[2413 - Ni Texo -) CEB Go | 
“CHI ACO * CU 
CEB (OD * CUBA 
[2.23 + Mi Texio - JRR 31 Mtexio 
CE XD - OU GU | 
[0.22 Mexio 


[c 23 - MTexio - EO 


! 
| 
li 


| 


i 
E 
E 
E 


E 
E 


“DUB C0D * CEB CD) 
“CEB CD “ CEB Gm 


CET 
DEDE 


Figura 76 - Blocos do aplicativo VI (d). 
Fonte: Elaborado pelos autores. 
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Enfim, a nossa tela 2 está programada. Vamos agora para a tela 3. 


* Tela 3 - Screen 3 

Primeiramente crie uma nova tela, a tela 3. O nosso aplicativo trabalha com matrizes 
de ordem máxima 3x3 e o determinante só é calculado sobre matrizes quadradas (mesmo 
número de linhas e colunas), assim nosso aplicativo efetuará o cálculo do determinante de 


matrizes 1x1, 2x2 e 3x3. 


Precisamos dar ao usuário a opção de escolher o tipo de matriz da qual deseja 
descobrir o determinante, portanto arraste para a área de visualização três botões e mude 
os seus textos para “matriz 1x1”, “matriz 2x2” e “matriz 3x3”, como mostra a figura 77, além 


disso você também pode renomeá-los. 


Matriz 1x 1 
Matriz 2x 2 
Matriz 3x3 


Figura 77 - Interface da tela 3 do aplicativo VI. 
Fonte: Elaborado pelos autores. 


Seguidamente adicione três telas e permaneça na tela 3. Permanecendo na tela 3, 


vá para a aba blocos e programe os botões segundo a figura 78. 


quando (IET4TSEB .Clique 


fazer | abrir outro ecrã nomeDoEcra 
x 


quando Clique 


fazer | abrir outro ecrã nomeDoEcra 


quando [cii4/<BB Clique 


fazer | abrir outro ecrã nomeDoEcra 


Figura 78 - Blocos do aplicativo VI (e). 
Fonte: Elaborado pelos autores. 


Nossa terceira tela está pronta, sendo que cada uma das três telas adicionadas se 


refere a um dos três tipos de matrizes quadradas trabalhadas aqui. 
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* Tela 4 - Screen 4 
* | Na aba designer arraste para a área de visualização na ordem dada: 
. Uma legenda e mude o seu texto para “informe matriz”; 
* | Caixa de texto e mude a sua dica para “a 11”; 
* | Um botão e altere o seu texto para “Calcular o Determinante”; 


* | Uma legenda e exclua o seu texto. Essa legenda será utilizada para informar o 
resultado; 


Caso queira pode também renomear os componentes adicionados de acordo com a 


respectiva função, tendo que a interface da tela 4 pode ser visualizada na figura 79. 


( JMostrar os componentes ocultos no Visualizador 8 Oscreeng 

Tamanho de telefone (505,320) A |Legendal9 
Lia 11 Matriz 
— Determinante 
À |Resultado 
Screen4 


Informe a sua matriz 


Calcular o Determinante 


Figura 79 - Interface da tela 4 do aplicativo VI. 
Fonte: Elaboração dos autores. 


O trabalho na aba de designer está pronto, vamos para aba blocos, lembrando que 
o determinante de uma matriz 1x1 é o próprio elemento que compõe essa matriz. Portanto, 


programe a tela 4 segundo a figura 80. 


quando .Clique 
fazer x ajustar para 


a 11 Matriz 1 - El Texto -| 


Figura 80 - Blocos do aplicativo VI (f). 
Fonte: Elaborado pelos autores. 


Com a tela 4 pronta seguimos para a tela 5. 


* Tela 5 - Screen 5 

Na aba Designer adicione os seguintes componentes na ordem descrita, lembrando 
que essa tela trabalhará com a matriz 2x2 e que a sua interface está representada na figura 
81. 
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* | Uma legenda e mude o seu texto para “informe a matriz”; 
* | Uma organização em tabelas de duas linhas e duas colunas; 


* Dentro de cada organização em tabelas insira quatro caixas de texto e altere a 
sua dica para o respectivo coeficiente que ela representa dentro de uma matriz 
2x2; 


* | Um botão e mude o seu texto para “Calcular o Determinante”; 


* | Uma legenda e exclua o seu texto. 


us Ro RNTo 
& EBorganizaçãoEmTabelal E siso 


Ham iz? Ativado 


Lia 21. Matriz 
La 12. Matrizz 
Lia 22 Matriz 


EB Botão! 


FonteNegrito 
Õ 
Fonteltálico 
[] 


TamanhoDaFonte 
À Legendaz 


140 


Calcular o Determinante FamiliaDaFonte 
padrão * 
Altura 


Automático 


Largura 


Figura 81 - Interface da tela 5 do aplicativo VI. 
Fonte: Elaborado pelos autores. 


O próximo passo é programar os componentes desta tela, lembrando que o 
determinante de uma matriz 2x2 é dado pela diferença do produto das diagonais principais 


pelo produto das diagonais secundárias, assim siga a figura 82 e monte os blocos. 


quando Clique 


fazer ajustar (CSTETDRS para PUT a 22 Matriz2 » Mi Texo -| 


(a 21 Matriz2 - B5 Texto - HMM a 12 Matriz? - EM Texto - | 


Figura 82 - Blocos do aplicativo VI (9). 
Fonte: Elaborado pelos autores. 


Nossa tela 5 está pronta, vamos agora para a última. 


* Tela 6 - Screen 6 
Essa tela, cuja interface está representada na figura 83, será responsável pelo 
cálculo do determinante de matrizes 3x3, para tanto arraste para a área de visualização da 


aba designer os seguintes componentes: 
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. Uma legenda e mude o seu texto para “Informe a matriz”; 


* | Uma organização em tabelas com três linhas e três colunas; 


* | Dentro da organização em tabelas, nove caixas de texto alterando a dica para 


o respectivo coeficiente que ela representa em uma matriz; 
. Um botão e mude o seu texto para “Calcular o determinante”; 
* | Uma legenda e exclua o seu texto. 


Tamanho de telefone (505,320) w A 'Legendal 


= EB organizaçãoEmTabelal 

Lia 11 Matriz 
Lia 21. Matriz3 
la 31 Matriz3 
Informe a matriz Tla 12 Matriz3 
Lia 22 Matriz 
Lia 32 Matriz3 
Lia 13 Matriz 


Lia 23 Matriz3 


Calcular o Determinante 


Lia 33 Matriz3 
== Botão 


à Legenda 


Renomear Apagar 


Figura 83 - Interface da tela 3 do aplicativo VI. 
Fonte: Elaborado pelos autores. 


Na aba blocos vamos programar os componentes, utilizando a regra de Sarrus para 


CorDeFundo 
Nenhum 


FonteNegrito 
[] 
Fonteltálico 
[] 
TamanhoDaFonte 
14.0 
FamiliaDaFonte 
padrão - 
HTMLFormat 
[E] 
TemMargens 
Altura 


Automático. 


Largura 


Automático 


Texto 


o cálculo do determinante, assim monte os blocos de acordo com a figura 84. 
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quando Clique 
(ro DRM resultado o a ja 11 Matriz3 - E 
a 22 Matriz3 - E 
ja 12 Matriz3 - E 
a 23 Matriz3 - À 
ja 31 Matriz3 - E 
13 Matriz? 
ja 21 Matriz3 - À 
a 31 Matriz3 - E 
a 22 Matriz3 - E 
a 11 Matriz3 - E 
33 Matriz - À 
ja 21 Matriz3 - BD 


PE 


PE 


Figura 84 - Blocos do aplicativo VI (h). 
Fonte: Elaborado pelos autores. 


Nossa tela 6 está pronta. 


* Concluindo o Aplicativo 

Para concluir o aplicativo volte a tela 2 e insira dois botões, um com a funcionalidade 
de proporcionar um novo cálculo e o outro para retornar à tela inicial. Na tela 3 acrescente 
um botão para retornar à tela inicial. Nas telas 4, 5 e 6 acrescente dois botões, um para um 
novo cálculo do determinante e outro para retornar à tela do determinante (escolha do tipo 
de matriz quadrada). Acrescentados estes botões eles devem ser programados de acordo 


com a figura 85. 
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TM Novaoperação - Me To 


fazer ajustar 
ajustar 


ajustar 


aju 
ajustar 
ajustar 
ajustar 
ajustar 
ajustar 
ajustar 
ajustar 
ajustar 


ajustar 


fazer | abrir outro ecrã nomeDoEcra 


obter valor inicial 
obter valor inicial 
obter valor inicial 
obter valor inicial 
obter valor inicial 
obter valor inicial 
obter valor inicial 
obter valor inicial 
obter valor inicial 
obter valor inicial 
obter valor inicial 


obter valor inicial 


obter valor inicial 


obter valor inicial 
obter valor inicial 
obter valor inicial 
obter valor inicial 
obter valor inicial 


Tela 4 


quando (EENSIES Clique 
fazer ajustar atriz 1 + Wi Texto - Ei=c obter valor inicial 
4 ajustar | Resultado - EM Texto - Ric obter valor inicial 


quando Clique 


fazer | abrir outro ecrã nomeDoEcra 


Figura 85 - Complementando o aplicativo VI. 
Fonte: Elaborado pelos autores. 


Seguindo a figura 85 programe os novos botões nas telas 3, 5 e 6 e nosso aplicativo 


estará pronto, mas você ainda poderá inserir mais alguns componentes e alterar algumas 


propriedades, como exemplo observe a figura 86. Ah! Não esqueça de testar o aplicativo. 
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Tela 


Faça a sua escolha clicando em um dos botões Clique em um dos botões abaixo para escolher o tipo de 
matriz 


Adição, Subtração e 
Multiplicação de Matrizes 


Inloerme a sua matr trécerme a matrur informe a matriz 


Figura 86 - Aplicativo VI concluído. 
Fonte: Elaborado pelos autores. 


O aplicativo sobre matrizes está prontinho, então você pode prosseguir e desenvolver 


o próximo aplicativo. 
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APLICATIVO VII: ANÁLISE COMBINATÓRIA 


A seguir é explicitada a construção de um aplicativo sobre o conteúdo matemático 
Análise Combinatória, mais especificamente sobre os tipos de Combinatória, os arranjos, 
as permutações e as combinações. Vale salientar que antes de construir esse aplicativo 
é importante recordar os conceitos e as fórmulas de cada tipo de combinatória e depois 


acompanhe a construção descrita abaixo. 


* Na aba Designer 

Primeiramente em sua conta do App Inventor inicie um novo projeto, em seguida 
insira duas organizações horizontais e dentro de cada arraste uma legenda e ao lado uma 
caixa de texto. Abaixo da segunda organização insira três botões e depois uma legenda, 
lembrando que cada botão indica um tipo de combinatória. Agora você pode nomear os 


componentes inseridos e alterar as propriedades conforme a figura 87. 


Mostrar os componentes ocultos no Visualizador 8 Oscreem resultado 


Tamanho de telefone (505,320) » E) Moreira iara FS 
pena 
mm E Legenda? [] Nenhum 
E FonteNegrito 
Ú 
& EBorganizaçãoHorizontalz 
- Fonteltálico 
ED Sltegencaz O 
Total de elementos (n) Altere a dica E 
paran p TamanhoDaFonte 
arranjos = 
Elementos de cada grupo 
(tomados p a p) 1 permutações FamíliaDaFonte 
Arranjos 13 combinações padrão * 
E A lresultado HTMLFormat 
Permutações Altere a dica O 
para p 
Combinações TemMargens 
Altura 
Automático. 
Largura 


Automático. 


» 
Renomear Apagar 


Figura 87 - Interface do aplicativo VII. 
Fonte: Elaborado pelos autores. 


Já temos os componentes que precisamos inseridos e organizados, o próximo 


passo é programá-los. 


* Na aba Blocos 

Para facilitar o processo de programação, vamos utilizar duas opções oferecidas 
pelos blocos: a criação de listas e de procedimentos. De modo que para formar as 
expressões para encontrar arranjo, permutação e combinação precisamos somente dos 
seguintes elementos: n!, (n-p)! e p!, então primeiramente programamos os blocos para 


determinarem estes elementos. 


Aplicativo VII: Análise combinatória 


63 


Para armazenar o n!inicie uma global fatorial com lista vazia e em seguida crie um 
procedimento para determinar o fatorial n (n!, para isso você precisa dos blocos que estão 


na figura 88. 


inicializar global para 3| criar lista vazia 


para cada 


repete 


adicionar elementos à lista lista 
item 


select list item list [EI 
index 


Figura 88 - Blocos do aplicativo VII (a). 
Fonte: Elaborado pelos autores. 


O procedimento para encontrar n!inicia em 2 e vai até o número n, caminhando no 
passo 1, ou seja, após o número 2 vem o número 3, depois o 4 até n. De modo que a global 
fatorial será composta pela multiplicação do número n selecionado até o antecessor de 2, 


conforme os blocos da figura 89. 


inicializar global criar lista vazia 


rico fator 
fazer g! al! q crarista E) 


para cada | | desde 


repete <) adicionar elementos à lista lista obter CEPE KENIEÇES 


item obter (EM x select list item list =] global fatoriall - | 
index obter (ED - O 


Figura 89 - Blocos do aplicativo VII (b). 
Fonte: Elaborado pelos autores. 


De acordo com a figura 90 crie um procedimento que informe o resultado de n!. 


para É No 
resultado select list item list 


index 


Figura 90 - Blocos do aplicativo VII (c). 
Fonte: Elaborado pelos autores. 
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Para determinar o fatorial (n-p)! e p! siga os mesmos passos utilizados para 


determinar n!. Logo a programação para encontrar (n-p)! é dada pela figura 91. 


inicializar global criar lista vazia 


criariista E 
E] 


adicionar elementos à lista lista obter E]: 


item select list item list Sd glob 


index obter (EB 


para ff 
resultado select list item list obter É 


a An -  Texio - JAM p - Nexo 


Figura 91 - Blocos do aplicativo VII (d). 
Fonte: Elaborado pelos autores. 


E a programação para encontrar p! é dada na figura 92. 


inicializar global criar lista vazia 


para [É 
fazer | ajusta o) crariista ED 
para cada | | desde E 
até (EB 
passo €) 
adicionar elementos à lista lista (8 global fatorial3 -. 


item obter (E x | selectlistitem list obter (JS 


index obter (ES - E 


para É; 


resultado select list tem list obter E)! 


index 


Figura 92 - Blocos do aplicativo VII (e). 
Fonte: Elaborado pelos autores. 

O último passo é programar os botões do aplicativo, para isso devemos expressar 
as fórmulas do arranjo, da permutação e da combinação utilizando os procedimentos 
criados e demais blocos necessários. Lembre-se de programar os botões para que eles 
primeiramente ativem/chamem os procedimentos que serão utilizados por eles para 


determinar o resultado, conforme mostra a figura 98. 
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quando ET; JE5 Clique 
fazer 


Ciro d fatorial N - EM) 


Ec pe perm 


fazer chamar 


mr d fatorial N - | 


chamar (EICIENÇES 1 


Figura 93 - Blocos do aplicativo VII (f). 
Fonte: Elaborado pelos autores. 


x [irc a fatorial NP -- 


(cid fatorial NP -. 


[ir cid fatorialP - | E 


O aplicativo sobre Análise Combinatória está pronto, mas você ainda pode melhorá- 


lo, ajustando o designer e inserindo alguns componentes, observe a figura 94, sendo que o 


mais importante é realizar o teste do aplicativo. 


JAnálise Combinatória 


Total de elementos (n) 18 


Elementos de cada 
grupo (tomados pap) 7 


O resultado da combinação é 31824 


Figura 94 - Aplicativo VII concluído. 
Fonte: Elaborado pelos autores. 
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APLICATIVO VIII: QUIZ SOBRE FUNÇÕES DO 1º E DO 2º 
GRAU 


O aplicativo construído aqui é um quiz e o tema escolhido para esse quiz foi 
funções do 1º e 2º grau, mas você pode escolher os mais variados temas, tanto conteúdos 


matemáticos como sobre qualquer outro assunto, como filmes e futebol, por exemplo. 


O quiz apresentado é formado somente por três questões, onde cada questão 
contém uma imagem, assim acesse a sua conta no App Inventor, inicie um novo projeto e 


siga os passos descritos. 


* Na aba designer 

Selecione a opção rolável do Screenf e em seguida arraste para a área de 
visualização um componente imagem para apresentar as imagens, altere a dimensão para 
80% de altura e 100% de largura, depois insira uma legenda, exclua o seu texto e a renomeie 
para “pergunta”. Em seguida insira uma organização horizontal e dentro dela insira uma 
caixa de texto e exclua a sua dica, ao lado insira dois botões, abaixo da organização insira 
uma legenda e exclua o seu texto e em seguida insira um botão. Observe a figura 95 e 


renomeie e mude o texto dos componentes. 


ClMostrar os componentes ocultos no Visualizador o) n1 imagem. da. questão 


ho de telefone (505 320 E 
Tamanho de telefone (505,320) w wá imagem da questão Clickable 


à pergunta 


ag Ma, a 
s OrganizaçãoHorizontall 


L'caixa de texto de res 


" Largura 
ES Responda 9 
= próxima 
* resposta correta dm nua 
BR) 3 tentar novamente 
RotationAngle 
RedimensionarParaCaber 
Visível 


Excluaa 
dica 


Ca Responda Próxima 
> Tentar novamente 


Renomear Apagar 


Multimédia 


Figura 95 - Interface do aplicativo VIII. 
Fonte: Elaborado pelos autores. 


Agora no campo “multimédia” insira as imagens que você irá utilizar no quiz em 


“enviar ficheiro”. Neste quiz utilizaremos as seguintes questões: 


* | “Qualo tipo de função representada no gráfico?”, cujo gráfico é dado pela figura 
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96 e a resposta é “segundo grau”. 


Figura 96 - Questão 1 do aplicativo VIII. 
Fonte: Elaborado pelos autores. 


* | Ográfico representa uma função do 1º grau. Ela é crescente ou decrescente?”, 
cuja imagem para essa questão é a figura 87 e a resposta para a pergunta é 
“decrescente”. 


Figura 97 - Questão 2 do aplicativo VIII. 
Fonte: Elaborado pelos autores. 


* | “Os lados de um triângulo são segmentos de reta de qual tipo de função?”, sen- 
do “primeiro grau” a resposta e a figura 98 a imagem utilizada. 


Figura 98 - Questão 3 do aplicativo VIII. 
Fonte: Elaborado pelos autores. 


Após inserir as imagens na multimédia, vamos programar o aplicativo. 


* Na aba Blocos 
Primeiramente vamos criar uma uma variável global para cada elemento (imagens, 


perguntas e respostas) que compõem o quiz, tal que cada variável irá armazenar a lista do 
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elemento. Então, faça conforme na figura 99. 


inicializar global para q) criar lista 


inicializar global para &) criar lista 


inicializar global para q) criar lista 


Figura 99 - Blocos do aplicativo VIII (a). 
Fonte: Elaborado pelos autores. 


Crie uma variável global índice para possibilitar que ocorra a mudança de imagens, 
perguntas e respostas e depois ajuste a caixa de texto da pergunta para a pergunta 1, de 
acordo com a figura 100. 


quando SCENE Inicializar 
fazer ajustar (ESTcES ELE selectlistitem list | obter FIESE 


index 
à a 


Figura 100 - Blocos do aplicativo VIII (b). 
Fonte: Elaborado pelos autores. 


Agora programe os botões como a figura 101. Primeiramente o botão para passar 
para a próxima questão, onde da questão 1, passará para a 2, depois para a 3 e retornará 
a questão 1. 


Ce TE e próxima - Meter: 


fazer ajustar CLLEMEISES para (o) EITEA olobal índice - MEAN 1) 


o o obter comprimento da lista lista 
CRE TS cid global índice - [=cRN 1] 
Ne 


ET Sj | imagem di estão - MM Imagem - Nic! select list item list 
index "td global índice - | 
ETTSE IM pergunta - | para select list item list 
index obter FSTITTE 
EI Leica resposta correta - BR Texto - ET] 


ajustar 
Nm, 


Figura 101 - Blocos do aplicativo VIII (c). 
Fonte: Elaborado pelos autores. 
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Agora o botão para responder a questão, de modo que onde ele compare a resposta 
dada ao aplicativo com a resposta informada pelo usuário, onde para não ocorrerem 
erros em relação a variância de letras maiusculas e minusculas ele analisa os dois textos 
exclusivamente em letras maiúsculas e posteriormente informa ao usuário se a resposta 


está correta ou não. Observe a figura 102. 


quando 


fazer (à) se selectlistitem list | obter EESEMESEK 

Co A CIA global indi 
Em cm À Texto | 
RR ajustar para 


senão ajustar para 
NR 


Nm, 


Figura 102 - Blocos do aplicativo VIII (d). 
Fonte: Elaborado pelos autores. 
Agora só programar o botão tentar novamente, sendo que esse botão tem a 
funcionalidade de limpar os campos para o usuário responder a mesma pergunta 


novamente, caso não tenha acertado na tentativa anterior. Faça como na figura 108. 


quando “Clique 


fazer ajustar 


ajustar 
hm 


Figura 1083 - Blocos do aplicativo VIII (e). 
Fonte: Elaborado pelos autores. 
Perfeito! Nosso quiz sobre funções do 1º e 2º grau está pronto, agora teste-o e 
deixe-o a sua cara, um exemplo está ilustrado na figura 104 e lembre-se que você pode 
acrescentar mais questões e utilizar este modelo para elaborar quiz sobre os assuntos do 


seu interesse. 
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Informe a resposta aqui e 
em seguida clique no 
botão "responda" 


fps 


Figura 104 - Aplicativo VIII concluído. 
Fonte: Elaborado pelos autores. 


Parabéns, você concluiu mais um aplicativo matemático! 
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CONSIDERAÇÕES FINAIS 


Esta obra trouxe uma explanação sobre a composição e o funcionamento do 
software App Inventor, entretanto nem todos os componentes e funcionalidades, como nem 
todos os blocos puderam ser explorados detalhadamente, por isso recomenda-se que o 
usuário explore o software, pois quanto mais trabalhar com ele mais domínio e facilidade 


terá para desenvolver aplicativos. 


Os aplicativos apresentados são sugestões, especialmente para professores de 
Matemática da Educação Básica e esperamos que a partir do desenvolvimento destes 
possamos contribuir para que o professor consiga elaborar outros, se apropriando cada 


vez mais do App Inventor. 
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